Event Handlers in Paper.js

Question

I am new to Paper.js, and I was interested in the event system when reading the tutorial. How the hanling event is described in the 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 fair functions in the global namespace ...
In the end, I have a few questions about this, and I did not find anything on the Internet about this:
- How to associate an event handler with a specific canvas?
- How to associate an event handler with a specific “object” (bitmap, rectangle, etc.)?
- How to associate several event handlers with something?

Answer 1

You can bind multiple event handlers using the attach () method (or its alias jQuery, on ()). You can remove them using the detach () or off () function. 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 install an event handler for all instances of an object type, it is best to create a factory function according to this answer .

Answer 2

I'm new to Paperjs, but here's what I think:

• How to associate an event handler with a specific canvas?

An area is automatically associated with a canvas when you point your canvas to a script:

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

Each instruction of this script will be associated with this canvas.

• How to associate an event handler with a specific “object” (bitmap, rectangle, etc.)?

Depending on the type, each “object” has many available event handlers. The page will give you all the event handlers for each type of object.

• How to associate multiple event handlers with something?

For example, PathItem has a click event and a double-click event .

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