I have external html5 canvas that you can paint on some lines using your mouse. I want to programmatically paint something one this canvas e.g. circle but in a form of animation (not painting at once but imitate the way the human would do and paint circle lets say for the duration of 1 sec.
The code on the external is not mine and uses GWT and this way is highly compressed and obfuscated. That's why I thought about triggering a sequence of mousedown, mousemove, sleep, mousemove, mouseup
events. I know it's possible to trigger mouse down and up event but what about mouse move event at specific location? Ideally using jQuery.
The mousemove event occurs whenever the mouse pointer moves within the selected element. The mousemove() method triggers the mousemove event, or attaches a function to run when a mousemove event occurs. Note: Each time a user moves the mouse one pixel, a mousemove event occurs.
The mouseover event occurs when a mouse pointer comes over an element, and mouseout – when it leaves.
The mousemove event is fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it.
The State of Touch in the Web Platform #Touch events are supported by Chrome and Firefox on desktop, and by Safari on iOS and Chrome and the Android browser on Android, as well as other mobile browsers like the Blackberry browser.
Have you looked at initMouseEvent
and dispatchEvent
?
Here is a link https://developer.mozilla.org/en/Document_Object_Model_%28DOM%29/event.initMouseEvent
The new (non-deprecated) way to do this is with the MouseEvent
constructor.
Here's some sample code that you can adapt to your use case:
var gestureTimeoutID;
var periodicGesturesTimeoutID;
window.simulateRandomGesture = function (doneCallback) {
var target = document.querySelector('canvas');
var rect = target.getBoundingClientRect();
var simulateMouseEvent = function simulateMouseEvent(type, point) {
var event = new MouseEvent(type, {
'view': window,
'bubbles': true,
'cancelable': true,
'clientX': rect.left + point.x,
'clientY': rect.top + point.y,
// you can pass any other needed properties here
});
target.dispatchEvent(event);
};
var t = 0;
/* Simple circle:
var getPointAtTime = (t) => {
return {
x: 300 + Math.sin(t / 50) * 150,
y: 300 + Math.cos(t / 50) * 150,
};
};
*/
// More fun:
var cx = Math.random() * rect.width;
var cy = Math.random() * rect.height;
var gestureComponents = [];
var numberOfComponents = 5;
for (var i = 0; i < numberOfComponents; i += 1) {
gestureComponents.push({
rx: Math.random() * Math.min(rect.width, rect.height) / 2 / numberOfComponents,
ry: Math.random() * Math.min(rect.width, rect.height) / 2 / numberOfComponents,
angularFactor: Math.random() * 5 - Math.random(),
angularOffset: Math.random() * 5 - Math.random()
});
}
var getPointAtTime = function getPointAtTime(t) {
var point = { x: cx, y: cy };
for (var i = 0; i < gestureComponents.length; i += 1) {
var c = gestureComponents[i];
point.x += Math.sin(Math.PI * 2 * (t / 100 * c.angularFactor + c.angularOffset)) * c.rx;
point.y += Math.cos(Math.PI * 2 * (t / 100 * c.angularFactor + c.angularOffset)) * c.ry;
}
return point;
};
simulateMouseEvent('mousedown', getPointAtTime(t));
var move = function move() {
t += 1;
if (t > 50) {
simulateMouseEvent('mouseup', getPointAtTime(t));
if (doneCallback) {
doneCallback();
}
} else {
simulateMouseEvent('mousemove', getPointAtTime(t));
gestureTimeoutID = setTimeout(move, 10);
}
};
move();
};
window.simulateRandomGesturesPeriodically = function (delayBetweenGestures) {
delayBetweenGestures = delayBetweenGestures !== undefined ? delayBetweenGestures : 50;
var waitThenGo = function waitThenGo() {
periodicGesturesTimeoutID = setTimeout(function () {
window.simulateRandomGesture(waitThenGo);
}, delayBetweenGestures);
};
window.simulateRandomGesture(waitThenGo);
};
window.stopSimulatingGestures = function () {
clearTimeout(gestureTimeoutID);
clearTimeout(periodicGesturesTimeoutID);
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With