Draw Lines or Signature with Mouse

advanced-prototyping

#24

Did someone get this to work in Axure 9?


#25

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.


#26

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.


#27

Hi @nkrisc,

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


#28

Hi @AntonMircea,

Thanks for sharing the details.

However, the RP file still doesnā€™t have the interaction and may be due to it the signature is not working.

Can you please post a screenshot for interactions or guide on which elements did you show/hide or move on mouse out event?


#29

Trying this in 10 with no luck. Any tips @nkrisc?? If itā€™s still working for you, even in an older version could you please post a copy of your file with it in the load event?


#30

Looks like the issue was the undocumented Axure API I was relying no longer works the it did, so Iā€™ve modified to it to not use that:

It assume that somewhere on your page thereā€™s an Axure element youā€™ve named @canvas. Also Iā€™ve not specifically used touch events so I canā€™t speak to how well it work on touch devices, but thereā€™s no reason it couldnā€™t be modified to properly handle touch events instead of mouse events.

(() => {
var canvas = document.createElement('canvas');
var container = document.querySelector('[data-label="@canvas"]');
var containerEl = container.children[0];
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;
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;
})()ā€‹

Create a drawing canvas using javascript