Paper.js中的事件处理程序

Gil*_*tes 6 javascript graphics paperjs

我是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);
}
Run Code Online (Sandbox Code Playgroud)

所以,它只是在全局命名空间中的功能...
最后我有一些关于它的问题,我没有在互联网上找到任何东西:
- 如何将事件处理程序绑定到特定的画布?
- 如何将事件处理程序绑定到特定的"对象"(栅格图像,矩形等)?
- 如何绑定多个事件处理程序?

Ale*_*ood 5

您可以使用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);
});
Run Code Online (Sandbox Code Playgroud)

如果要为某种类型的对象的所有实例设置事件处理程序,则最好根据此答案创建工厂函数.