Paper.js中的事件处理程序 [英] Event handlers in Paper.js

问题描述

我是Paper.js的新手，在阅读教程时，我对事件系统感到惊奇。
这就是教程中描述的事件处理：

  var path; 
函数onMouseDown（event）{
 //创建路径：
 path = new Path（）; 
 path.strokeColor ='black'; 
 //添加鼠标位置：
 path.add（event.point）; 
 
 
 function onMouseUp（event）{
 //增加鼠标位置：
 path.add（event.point）; 
 
 
 
 $ b $ p 
 $ b $ p所以，它在全局名字空间中的作用... 
 
最终我有几个关于它的问题，并且我没有在互联网上发现任何东西：
 
  - 如何将事件处理程序绑定到特定画布？
 
  - 如何绑定如何将多个事件处理程序绑定到某个东西？
 
 
 
解决方案
您可以使用attach（）方法（或其在jQuery风格的别名on（））上绑定多个事件处理程序。您可以使用detach（）或off（）来删除它们。这里有一个来自事件处理文档< a>： 
 
 
  //在视图中心创建一个圆形路径：
 var path = new Path .Circle（{
 center：view.center，
 radius：25，
 fillColor：'black'
}）; 
 
 var shiftPath = function（）{
 this.position + = new Point（15,15）; 
}; 
 
 //当鼠标进入该项目时，将其填充颜色设置为红色：
 path.attach（'mouseenter'，function（）{
 this.fillColor ='red '; 
}）; 
 
 path.on（'mouseenter'，shiftPath）; 
 
 //当鼠标离开物品时，将其填充颜色设置为黑色
 //并移除移动器功能：
 path.on（'mouseleave'，function（） {
 this.fillColor ='black'; 
 path.detach（'mouseenter'，shiftPath）; 
}）; 
  
如果您想为某类对象的所有实例设置事件处理函数，最好创建一个工厂函数，按照这个答案 。
 
I am new to Paper.js, and I was wondered by the event system, while reading tutorial.
Thats how event hanling described in tutorial:
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);
}
So, its just functions in global namespace...

Eventually I have a few questions about it, and I didnt found anything on the internet on this:

- How to bind event handler to particular canvas?

- How to bind event handler to particular "object" (raster image, rectangle, etc)?

- How to bind multiple event handlers to something?
解决方案
You can bind multiple event handlers using the attach() method (or its jQuery-style alias, on()). You can remove them with detach() or off(). Here's a modified example from the event handling documentation:
// 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);
});
If you want to set an event handler for all instances of a type of object, it's best to create a factory function, as per this answer.

                        
这篇关于Paper.js中的事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！