CODEWITHSUNDEEP
paperjs
blarue
blarue

Reputation: 35

Display pointer cursor when hovering paperjs item

I would like the mouse cursor to be a pointer when hovering a Paper.js item.
I have found nothing allowing this in the documentation.
Is that possible ?

expected display when mouse is out

expected display when mouse is in

Upvotes: 2

Views: 1177

Answers (1)

sasensi
sasensi

Reputation: 4650

It is possible by setting the CSS cursor property of the canvas element.
You can set it to pointer when mouse enter the item and set it back to default when mouse leave the item.

Here is a sketch demonstrating the solution.

// draw a circle
new Path.Circle({
    center: view.center,
    radius: 50,
    fillColor: 'orange',
    // on mouse enter...
    onMouseEnter: function() {
        // ...set canvas cursor to pointer
        view.element.style.setProperty('cursor', 'pointer');
    },
    // on mouse leave...
    onMouseLeave: function() {
        // ...set canvas cursor to default
        view.element.style.setProperty('cursor', null);
    }
});

// display instruction
new PointText({
    content: 'Hover the circle to see the cursor change',
    point: view.center + [0, -80],
    justification: 'center'
});

Upvotes: 4

Related Questions