Draw Lines or Signature with Mouse

[lyoung]

Whoa! With your tips, I’ve got it working. You’re awesome, Alyssa!

My challenge now is to reload the original page. In other words, the page that actually has the signature spot also has a “Clear” button. Clicking it should of course clear the signature. The only way I can think of performing this is to reload the original page that has the plugin and OnPageLoad event. I’ve searched around, and I’ve not spotted any good advice about how to reload one page by clicking a button that’s located on another page.

Any thoughts?

Thanks,
lyoung

[Alyssa_Axure]

Refreshing the page with the plugin is the way that I would’ve done it if you’re trying to contain the “Clear” action within Axure RP’s built-in functionality. I took a quick look around to see if there’s a way to clear the canvas that you inserted with your AxShare plugin and it looks like the clearRect() method may be a start:

HTML canvas clearRect() Method

[lyoung]

Thanks, Alyssa… I did however find a simpler solution. My “Clear” button has an OnClick event that opens my original page (that has the plugin) within the inline frame on my signature page. Re-opening this page effectively acts as a refresh and clears the canvas. Eureka!!!

Thanks for all your help.

lyoung

[AntonMircea]

@lyoung I followed the steps you indicated in your post, created plugin with canvas and copied javascript in Onpageload with the open “” case. But it doesn’t seem to work. Are there any other amendments that you have done and you might not have mentioned? If it’s not too much to ask, Is there any chance you could share the prototype?

Thanks!

[AntonMircea]

Yes! Managed to get it to work!

[nithindavis]

Might wanna refer to this post: How to create a Line Draw function in Axure with some math and trigonometry

[Rebecca91]

@AntonMircea Maybe you can share a prototype how you made it work? That would be great!

Thanks!

[lshillman]

Hello from the future! I was trying to prototype a drawable signature field myself, and really wanted to come up with a native Axure solution. I got close, and the result is kind of academically interesting but not terribly practical for my purposes. Posting it here in case it’s helpful for someone else.

Live example
drawing-canvas.rp (66.0 KB)

Basically I’m using a repeater to populate a grid of “pixels” that can be turned on or off as the mouse cursor drags over them. It mostly works if you limit the number of repeater items and make your “pixels” large (mine are 15x15px). But since each item is responsible for checking to see whether the cursor is over it, and then turning itself on or off, it gets extremely slow the more pixels you add. So this version has kind of a retro 8-bit feel to it. It would be great if anyone has ideas for improving it!

[AntonMircea]

Hi @Rebecca91

Here’s the working prototype hosted online - https://fe5qnk.axshare.com

And I’m attaching the .rp file as well.

Bare in mind the in order for the prototype to work you need to host it on axure share, and you have to add the page with the javascript to the plugin pages see attached.

drawline.rp (68.8 KB)

Hope this helps.
Cheers!

[Pierre.J]

Hi @AntonMircea,

Could you add the plugin you used to your post?
I would be so nice to have all the necessary information in one place

And thanks a lot, it could be useful for a future design

Best,

[AntonMircea]

Hi @Pierre.J

the plugin cannot be added as it’s not a file, it’s a setting in the axure share functionality.

See attached

Hope this helps.
Cheers!

[Pierre.J]

Yeah it helps

Thanks a lot @AntonMircea

[nkrisc]

Just throwing in some code I created for this previously. You can add this as an AxShare plugin or in an OpenLink action with javascript:. You also just need any widget in your project named canvas. There’s also a clear function you can call.

(() => {
var canvas = document.createElement('canvas');
var container = $axure('@canvas');
var containerEl = container.getElements()[0]
canvas.width = container.width();
canvas.height = container.height();
canvas.id = 'canvas';
containerEl.append(canvas);
var ctx = document.getElementById('canvas').getContext('2d');
var mousedown = false;
canvas.addEventListener('mousedown', ev => {
mousedown = true;
ctx.beginPath();
ctx.moveTo(ev.offsetX, ev.offsetY);
});
canvas.addEventListener('mousemove', ev => {
if (mousedown) {
ctx.lineTo(ev.offsetX, ev.offsetY);
ctx.stroke();
}
});
document.body.addEventListener('mouseup', ev => {
mousedown = false;
});
function clear() {
ctx.fillStyle = '#FFF';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
window.clear = clear;
})()​

[fabios15]

Hi, I tried to follow your hints adding the drawline.rp file to my project but I noticed that all the interactions of the box are set to “Nothing”; is this normal?

When I try to draw something, nothing appears. Sometimes I can see a little mark on the right like in this screen

Here is the live link if you want to test

Thanks

[freiand]

Hey @nkrisc, could you post a .rp with the script in a OpenLink action? This doesn’t work for me in Axure 9…
Thanks!

[freiand]

Hey @fabios15, did you get this to work? I’m struggling with same issue here…

[freiand]

Did someone get this to work in Axure 9?

[fabios15]

Hi @freiand , I’m new of Axure and unfortunately I don’t know how to solve. I’m still stuck with this issue . If you find anything that can help (or another solution to get a signature) please inform me.

[nkrisc]

I don’t have access to Axure at the moment but you need to add an Open Link action, choose URL then paste the code above after javascript: in the URL field. You should place the Open Link action on the OnLoad event of a widget or the page itself so it executes immediately.

[axurelearning]

Hi @nkrisc,

Didn’t get it working either. Tried both with plugin and open link approach but no luck.