在Javascript中以编程方式触发鼠标移动事件

Question

我有外部 html5 画布，您可以使用鼠标在某些线条上进行绘制。我想以编程方式在这个画布上绘制一些东西，例如圆圈，但以动画的形式（不是一次绘画，而是模仿人类的方式，画圆圈让我们说 1 秒的持续时间。

外部代码不是我的，并且使用 GWT，这种方式是高度压缩和混淆的。这就是为什么我考虑触发一系列mousedown, mousemove, sleep, mousemove, mouseup 事件。我知道可以触发鼠标向下和向上事件，但是特定位置的鼠标移动事件呢？理想情况下使用 jQuery。

Answer 1

你看过initMouseEvent和dispatchEvent吗？

这是一个链接https://developer.mozilla.org/en/Document_Object_Model_%28DOM%29/event.initMouseEvent

Answer 2

新的（非弃用）方法是使用MouseEvent 构造函数。

这里有一些示例代码，您可以根据自己的用例进行调整：

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);
};