Paper JS 的编程点击事件

Question

我正在尝试触发MouseEvent将由Paper JS接收的普通 JavaScript 。我有一个 HTML 画布drawing-canvas，已经是paper.setup. 这是我目前的尝试：

const drawingCanvas = document.getElementById('drawing-canvas');
drawingCanvas.dispatchEvent(new MouseEvent('click', {
    buttons: 1,
    clientX: 1153,
    clientY: 550,
    screenX: 1153,
    screenY: 621,
}));

从控制台触发此操作不会触发我的Layer鼠标事件。

这是我在 Paper Sketch 中的尝试。我希望在运行它时进行日志记录。

如何触发 Paper JS 将收到的普通 JS 鼠标事件？

Answer 1

我猜想有几件事会阻止您的示例正常工作：

• Paper.js有自己的MouseEvent类，在上下文中使用时可能会与本​​机类发生冲突PaperScript（例如在 sketch.paperjs.org 中），因此您应该直接使用JavaScript。
• Paper.js单击检测依赖于多个事件触发（mousedown然后mouseup进行一些计时和距离检查），因此您应该使用更简单的事件（例如mousedown）。

对您来说最简单的方法是尝试从工作示例中拒绝您的具体案例。
这是一个小提琴，为您提供了一个起点。

// Setup Paper.js.
paper.setup('canvas');

// Create an orange rectangle covering all the canvas.
new paper.Path.Rectangle({
    rectangle: paper.view.bounds,
    fillColor: 'orange',
    // On mousedown on this rectangle...
    onMouseDown: function(event) {
        // ...draw a blue circle at event point.
        new paper.Path.Circle({
            center: event.point,
            radius: 30,
            fillColor: 'blue'
        });
    }
});

// On button click...
document.getElementById('button').addEventListener('click', function() {
    // ...trigger a fake mousedown event at point 100,100.
    document.getElementById('canvas').dispatchEvent(new MouseEvent('mousedown', {
        clientX: 100,
        clientY: 100
    }));
});