Event handlers in Paper.js

Question

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?

Ramey

Answer 1

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.

Macronucleus

Alex, how would the last part of your answer translate in code? I would like to attach event handlers for mouseEnter, mouseleave for all the objects except rasters, in my Paper.js /JS project. How can I do that? The items are imported from SVG's so its kind of a mess to add handlers to each of the paths manually. – Tomokotomorrow

And how can we add an event to a shape when we use javascript directly via paper.js? ( we have to add tools manually ... ) – Ocko

Answer 2

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

• How to bind event handler to particular canvas?

The scope is automatically associated to a canvas when you specify your canvas to a script:

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

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

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

Depending on is type each "object" have is sets of events handlers available. The reference page will give you all the events handlers for each type of objects.

• How to bind multiple event handlers to something?

For example PathItem have 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';
}

Adahadaha

I meant two handlers for one event – Ramey

I'm not sure I understand "two handlers for one event"? – Adahadaha