программно вызывая событие перемещения мыши в JavaScript - PullRequest
Новая
       12

программно вызывая событие перемещения мыши в JavaScript

5 голосов
/ 17 марта 2012

У меня есть внешний холст html5, который вы можете рисовать на некоторых линиях с помощью мыши. Я хочу программно нарисовать что-нибудь на этом холсте, например. круг, но в форме анимации (не рисует сразу, а подражает тому, как делал бы человек, и рисует круг, скажем, в течение 1 секунды.

Внешний код не мой и использует GWT, и этот способ сильно сжат и запутан. Вот почему я подумал о запуске последовательности mousedown, mousemove, sleep, mousemove, mouseup событий. Я знаю, что можно вызывать события мыши вниз и вверх, но как насчет события перемещения мыши в определенном месте? В идеале использовать jquery.

Ответы [ 2 ]

3 голосов
/ 24 марта 2012

Вы смотрели на initMouseEvent и dispatchEvent?

Вот ссылка https://developer.mozilla.org/en/Document_Object_Model_%28DOM%29/event.initMouseEvent

1 голос
/ 07 июля 2017

Новый (не устаревший) способ сделать это с помощью конструктора 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);
};
...