Draw Lines or Signature with Mouse

advanced-prototyping
#1

Hey All,

I’m doing a mock up and need to illustrate drawing signatures with the mouse within a rectangular space (OnMouseDown, draw with mouse, OnMouseUp, drawing stopped). I’m wondering if there’s a bit of code for this that could be dropped in within my project??? Also, I don’t necessarily even need to save the signature drawn… just need to allow the user to draw with the mouse. I’ll probably also include a “Clear” button to erase the signature and begin again (which I think I can figure that part out).

Any help would be appreciated. Thanks!

#2

Hi lyoung,

That sounds like an interesting prototype. Axure RP doesn’t have a built-in event that will let you draw freely in the browser output, but it looks like there are some plugins out there that do what you want:

If you’re hosting the prototype on AxShare, you can try using the AxShare Plugins feature to drop HTML or Javascript plugins into your prototype. While we can’t assist much with troubleshooting issues with custom code, we do have some basic steps available that could help you get started:

Axure Share Basics

Another potential route would be to find a site that has the digital signature element ready to test, and then linking to that page with an inline frame.

Hopefully that helps!

#3

Thanks for the reply, Alyssa.

I have been using AxShare, and I feel like I’m close to the solution, but I can’t quite get there. I can’t seem to get it to work inside of a dynamic panel. I’ve created a new plugin within Axshare with this content:

<canvas id=“c” width=“500” height=“300”></canvas>

Then, I have this code in the OnPageLoad event within a project:

javascript:
var el = document.getElementById(‘c’);
var ctx = el.getContext(‘2d’);
var isDrawing;

el.onmousedown = function(e) {
isDrawing = true;
ctx.lineWidth = 3;
ctx.lineJoin = ctx.lineCap = ‘round’;
ctx.shadowBlur = 2;
ctx.shadowColor = ‘rgb(0, 0, 0)’;
ctx.moveTo(e.clientX, e.clientY);
};
el.onmousemove = function(e) {
if (isDrawing) {
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
}
};
el.onmouseup = function() {
isDrawing = false;
};

With this setup, I publish to Axure Share, and the drawing code above does actually work. It’s great, but… no matter what I try, I just can’t get the drawing to be inside of a dynamic panel. What am I missing? I’m thinking I have all the content, but I’m just not putting it in the right place. Any ideas?

Thanks,
lyoung

#4

I couldn’t tell you why the code doesn’t work when you point it at a dynamic panel, but I think I found a workaround. On one page, add the plugin to the end of the header and have that page’s OnPageLoad link to your javascript. Then, on the page where you want the digital signature to appear, put an inline frame inside of your dynamic panel and point it to the page where you put the OnPageLoad case. This should allow you to load that page’s digital signature canvas within the inline frame, which in turn is inside of the dynamic panel that you originally wanted to target. Hopefully that helps!

#5

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

#6

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

#7

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

#9

@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!

#11

Yes! Managed to get it to work!

#12

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

#13

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

Thanks!

#14

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!

#15

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.

22
Screenshot 2020-03-26 at 22.40.22.png2334×654 48.8 KB

drawline.rp (68.8 KB)

Hope this helps.
Cheers!

Line drawing animation
#16

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 :grin:

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

Best,

#17

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

18
Screenshot 2020-03-27 at 11.45.18.png1446×1476 111 KB

Hope this helps.
Cheers!

#18

Yeah it helps :yum:

Thanks a lot @AntonMircea :pray:

#19

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;
})()​
#20

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?

Cattura1
Cattura1.PNG287×598 5.53 KB

When I try to draw something, nothing appears. Sometimes I can see a little mark on the right like in this screen
Cattura
Here is the live link if you want to test

Thanks :slight_smile:

#22

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

#23

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