Paper.js 中的事件处理程序

Question

我是Paper.js的新手，在阅读教程时，我对事件系统感到疑惑。这就是教程中描述的事件汉岭：

var path;
function onMouseDown(event) {
    // Create a path:
    path = new Path();
    path.strokeColor = 'black';
    // Add the mouse down position:
    path.add(event.point);
}
function onMouseUp(event) {
    // Add the mouse up position:
    path.add(event.point);
}

所以，它只是全局命名空间中的函数...
最终我对此有几个问题，但我在互联网上没有找到任何关于此的内容：
- 如何将事件处理程序绑定到特定的画布？
- 如何将事件处理程序绑定到特定的"对象"（光栅图像、矩形等）？
- 如何将多个事件处理程序绑定到某物？

Answer 1

您可以使用 attach（） 方法（或其 jQuery 样式别名 on（））绑定多个事件处理程序。您可以使用 detach（） 或 off（） 删除它们。下面是事件处理文档中的修改示例：

// Create a circle shaped path at the center of the view:
var path = new Path.Circle({
    center: view.center,
    radius: 25,
    fillColor: 'black'
});
var shiftPath = function() {
    this.position += new Point(15,15);
};
// When the mouse enters the item, set its fill color to red:
path.attach('mouseenter', function() {
    this.fillColor = 'red';
});
path.on('mouseenter', shiftPath);
// When the mouse leaves the item, set its fill color to black
// and remove the mover function:
path.on('mouseleave', function() {
    this.fillColor = 'black';
    path.detach('mouseenter', shiftPath);
});

如果要为某种类型的对象的所有实例设置事件处理程序，最好创建一个工厂函数，如此答案所示。

Answer 2

我是

Paperjs的新手，但这是我的想法：

• 如何将事件处理程序绑定到特定的画布？

当您将画布指定为脚本时，范围会自动关联到画布：

<script type="text/paperscript" src="js/myScript.js" canvas="myCanvas"></script>

此脚本的每个指令都将与此画布相关联。

• 如何将事件处理程序绑定到特定的"对象"（光栅图像、矩形等）？

根据每个"对象"的类型，可用的事件处理程序集。参考页将为您提供每种类型的对象的所有事件处理程序。

• 如何将多个事件处理程序绑定到某物？

例如，PathItem 具有单击事件和双击事件。

var path = new Path.Circle();
path.onClick = function(event) {
    this.fillColor = 'red';
}
path.onDoubleClick = function(event) {
    this.fillColor = 'green';
}