Nicholas Kyriakides Nicholas Kyriakides - 1 year ago 169
jQuery Question

Mixing Javascript and Mouse Events in Paper.js

Bonjour guys,

Okay i am trying for some time now to get some mouse zooming done with the mousewheel. This necessitates that i use Javascript as well, since Paper.js does not have a mouseScroll event.

I've read this: , but since i am a coding noob i can't figure out just yet how to do it in my scenario exactly.

This is what i use, but i seem to get this error message in Chrome Canary "Uncaught TypeError: Cannot call method 'subtract' of undefined."

$(document).ready(function() {
$('#canvas').bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(e) {
var delta = 0;
if (e.type == 'mousewheel') { //this is for chrome/IE
delta = e.originalEvent.wheelDelta;
else if (e.type == 'DOMMouseScroll') { //this is for FireFox
delta = e.originalEvent.detail*-1; //FireFox reverses the scroll so we force to to re-reverse...
if (delta > 0) { //scroll up
var zoomCenter = e.point.subtract(;
var moveFactor = toolZoomIn.zoomFactor - 1.0;
paper.view.zoom *= toolZoomIn.zoomFactor; =;
toolZoomIn.mode = '';
else if(delta < 0){ //scroll down
//call the zoomOut here

Answer Source

Native JS events won't have a point property, so we need to create a point value for it:

var point = paper.DomEvent.getPoint(event);

But since we want the point in relation to the canvas:

var point = paper.DomEvent.getOffset(event, $('#canvas')[0]);

With this we can then convert to project space using view.viewToProject():

point = paper.view.viewToProject(point);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download