Canvas zoom in and out with scroll

[Csaba Kola]

Hi EveryOne,

i found this tutorial:

http://matthiasberth.com/articles/stable-zoom-and-pan-in-paperjs

If i am not wrong i have to compile this code snipplet to have working JS version.

Is there an another solution about this broblem? maybe without mousewheel  plugin?

I would like to zoom in and out. PLS help me to solve...

Thanks:

Csaba Kola

[Filipp Procenko]

My solution.

Because paper.js doesn't have mousewheel events direct handling :

Create crossbrowser event listener (or use JQuery)

var elem = document.getElementById(itemId);

        if (elem.addEventListener) {
            if ('onwheel' in document) {
                // IE9+, FF17+, Ch31+
                elem.addEventListener("wheel", callback);
            } else if ('onmousewheel' in document) {
                // устаревший вариант события
                elem.addEventListener("mousewheel", callback);
            } else {
                // Firefox < 17
                elem.addEventListener("MozMousePixelScroll", callback);
            }
        } else { // IE8-
            elem.attachEvent("onmousewheel", callback);
        }

callback will be like this:

function onWheel(e) {


        e = e || window.event;

        //get mousewheel delta only for negative or positive
        var delta = e.deltaY || e.detail || e.wheelDelta;

        // get the point in paper coords
        var point = paper.view.getEventPoint(e);
        //make a zoom
        paper.zooming(delta, point);// THIS IS THE ZOOM FUNCTION ITSELF!!!!!!!

        e.preventDefault ? e.preventDefault() : (e.returnValue = false);
    }

paper.zooming function looks like this

this.zooming = function (delta, point) {
    var MIN = 0.1;
    var MAX = 2;
    var ZOOM_FACTOR = 10;
    // recieve event coords in view
    var pointIn = point;
    // recieve coords in project
    var pointOut = paper.view.projectToView(pointIn);
    //get mouse event only for + or -
    var zoom = delta;
    //prepare zoom factor
    var zoomVal = paper.view.zoom / ZOOM_FACTOR;
    //make a zoom
    if (zoom > 0) {
        paper.view.zoom -= zoomVal;
    }
    if (zoom < 0) {
        paper.view.zoom += zoomVal;
    }
//if bigga or smalla adjust
    if (paper.view.zoom > MAX) {
        paper.view.zoom = MAX;
    } else if (paper.view.zoom < MIN) {
        paper.view.zoom = MIN;
    }
    // recieve event coord in project after native zoom
    var pointOut2 = paper.view.projectToView(pointIn);
    // get translation and apply it
    var trans = [((pointOut.x - pointOut2.x) / paper.view.zoom), ((pointOut.y - pointOut2.y) / paper.view.zoom)];
    paper.view.translate(trans);

};

[Filipp Procenko]

Last paper.zooming function is written in paperscript so you need to compile it to js or use in paperscope environment

[Csaba Kola]

Thank you very much, Filipp!