Did someone get this to work in Axure 9?
Draw Lines or Signature with Mouse
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.
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.
Hi @nkrisc,
Didnāt get it working either. Tried both with plugin and open link approach but no luck.
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?
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?
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