我正在尝试启动普通 JavaScript MouseEvent
Paper JS 将收到.我有一个 HTML Canvas 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
鼠标事件。
Here是我在 Paper Sketch 中的尝试。我希望在运行它时进行日志记录。
我如何触发 Paper JS 将接收的普通 JS 鼠标事件?
最佳答案
我想有几件事会阻止您的示例工作:
Paper.js
有自己的MouseEvent
类,当在PaperScript
上下文中使用时(例如在 sketch. paperjs.org) 所以你应该直接在JavaScript
中工作。Paper.js
点击检测依赖于触发多个事件(mousedown
然后mouseup
并进行一些时间和距离检查)所以你应该使用更简单的事件(例如mousedown
)。
对您来说最简单的方法是尝试从工作示例中拒绝您的具体案例。
这是一个fiddle给你一个起点。
// 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
}));
});
关于javascript - Paper JS 的编程点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54893897/