使用JavaScript编程触发鼠标移动事件

Question

我有一个外部的HTML5画布，你可以用鼠标涂上一些线条。我想以编程方式在这个画布上绘制一些东西，例如圆形，但是以动画形式呈现（不是一次性完成绘制，而是模拟人类绘制的方式，并且让圆形在1秒钟内逐渐出现）。

外部代码并非我的代码，它使用了GWT，并且经过高度压缩和混淆。因此，我考虑触发一系列mousedown, mousemove, sleep, mousemove, mouseup事件。我知道可以触发鼠标按下和松开事件，但如何在特定位置触发鼠标移动事件呢？最好使用jQuery。

- pzo

---

你能展示一下你失败的尝试吗？ - mindandmedia

不幸的是，我卡在了如何制作鼠标移动事件上。 - pzo

你真的需要触发鼠标事件吗？使用lineTo和moveTo进行编程绘制的理由是什么？关于画布绘制的教程 - http://www.html5canvastutorials.com/tutorials/html5-canvas-paths/ - widged

正如我所说，画布属于使用GWT制作的外部代码。画布上的绘画也执行其他代码。生成的GWT代码很难修改，这就是编程触发事件的想法。 - pzo

这个代码片段可能会有用：https://gist.github.com/3517765 - Philip Nuzhnyy

我已经回答了一个类似的问题。试试这个链接：https://dev59.com/8FgR5IYBdhLWcg3wlOEr#55080467 :) - Alexander Zabyshny

Answer 1

你看过 initMouseEvent 和 dispatchEvent 吗？这里有一个链接：https://developer.mozilla.org/en/Document_Object_Model_%28DOM%29/event.initMouseEvent。

- khael

---

这已经被弃用了。 - zero_cool

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

- 1j01

---

你可能不应该将第二个参数的键转换为字符串来创建新的鼠标事件。 - Mathijs Segers

@MathijsSegers 从功能上讲并不重要，但是是的，它们不需要在那里。我相信我从某个地方复制了那部分然后只是保留了引号。 - 1j01

VM2345:55 Uncaught ReferenceError: t is not defined - Alexey Sh.

@AlexeySh。已修复。 - 1j01