Mixing Javascript and Mouse events in Paper.js

Question

I have been trying to get mouse scaling for some time when the mouse wheel works well on Paper.js.

This requires me to use Javascript since Paper.js does not have a mouseScroll event.

$(document).ready(function() {
    $('#canvas').bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(e) {
        var delta = 0;
        e.preventDefault();
        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(paper.view.center);
            var moveFactor = toolZoomIn.zoomFactor - 1.0;
            paper.view.zoom *= toolZoomIn.zoomFactor;
            paper.view.center = paper.view.center.add(zoomCenter.multiply(moveFactor/toolZoomIn.zoomFactor));
            toolZoomIn.hitTest(event);
            toolZoomIn.mode = '';
        }
        else if(delta < 0){ //scroll down   
            //call the zoomOut here
        }
    });
});

Answer 1

Native JS events will not have properties point, so we need to create a point value for it:

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

But since we need a point relative 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);