onMouseDrag event.delta jittering

André Fernandes

unread,

Aug 12, 2012, 2:10:08 PM8/12/12

to pap...@googlegroups.com

Hi!

Can you help me understand why event.delta sometimes gives two consecutive values that cancel each other even though the mouse is being dragged in one direction.

Example:
Delta:{ x: 20, y: -11 }
Delta:{ x: -20, y: 11 }

This makes the next animation jitter with the default zoom but the problem disappears with 1.3 zoom.

Thanks.

<!DOCTYPE html>

<html>

<head>

window.onload = function() {

var canvas = document.getElementById("canvas");

paper.setup(canvas);

var circle = new paper.Path.Circle(new paper.Point(200, 200), 50);

circle.fillColor = "black";

circle.onMouseEnter = function() {

this.fillColor = "red";

}

circle.onMouseLeave = function() {

this.fillColor = "black";

}

circle.onClick = function() {

this.fillColor = "blue";

paper.view.zoom = 1.3;

}

paper.tool.onMouseDrag = function(event) {

console.log("Center:" + paper.view.center);

console.log("Delta:" + event.delta);

var newCenter = paper.view.center.subtract(event.delta);

console.log("New Center:" + newCenter);

paper.view.center = newCenter;

}

paper.view.draw();

}

</script>

</head>

<body>

</body>

</html>

Ryan Beasley

unread,

Aug 26, 2012, 4:48:30 PM8/26/12

to pap...@googlegroups.com

You aren't using v0.22 because that gives an error trying to access paper.tool. So I assume you're using the nightly build.

When you call

paper.view.center = newCenter;

It does

this.scrollBy(Point.read(arguments).subtract(this.getCenter()));

So you are scrolling the view by the difference between the previous center and the new center.

It looks like event.delta comes from

this.tool._point.subtract(this.tool._lastPoint)

Apparently _lastPoint is a function of the view.

I'm not completely clear on how the process gets started, but what's happening is that when you scroll the view it messes up the next event.delta.

I'm seeing an event.delta.x of say 20, which causes the view to scroll 20 points to the left...then I drag the mouse a single point and I see an event.delta.x of -19... which causes the view to scroll 19 points to the right. and it keeps bouncing back and forth.

Because the view scrolling is showing up in the event.delta, it affects the next view scroll, which affects the next event.delta....and so on.

I'm not sure if this would be classified as a bug, but you may want to add an issue anyway. https://github.com/paperjs/paper.js/issues?state=open

Normally for just moving a single Item I would suggest code like in http://paperjs.org/examples/hit-testing/

path.position += event.delta;

So instead of moving the view, move the Item.

However, if you must move the view, it looks like event.event.x and event.event.y are unaffected by the view scrolling...so if you remember the lastPosition yourself you should be able to make it work. There may be other x & y values in event that would also work.

~Ryan

André Fernandes

unread,

Aug 29, 2012, 7:47:36 AM8/29/12

to pap...@googlegroups.com

I tried this because I wanted to move all the items in the view.

I didn't know that the view and the event were coupled...

Thanks a lot for the clarification Ryan! :)

Reply all

Reply to author

Forward