Formula for stable zoom

[Tibor Pino]

Hi there. I need help how to translate view to make stable zoom so vies is zoom right under the mouse point. Here is what I have

I call function setZoom with zoom factor always on mouse wheel scroll

setZoom(zoomFactor) {

// now 

view.setCenter(view.bounds.width / 2 * zoomFactor, view.bounds.height / 2 * zoomFactor);

// how to make this work?

//this.view.translate(0, 0);

// every object coordinates and sizes are multiplied by zoomFactor, canvas width and height stay the same

repaint(zoomFactor);

}

Thank you for your help

[Tibor Pino]

And I also have variables event delta and mouse coordinates

mouseX, mouseY, event.delta

[Samuel ASENSI]

Hi,

Here is a fiddle demonstrating how to achieve this using Paper.js and Jquery mousewheel plugin.

All theorical informations are well detailed in this article.

Hoping it helps.

[Samuel ASENSI]

Ps: I forget to post code

// user defined constant

var ZOOM_FACTOR = 1.5;

// draw a centered circle

new Path.Circle({

    center   : view.center,

    radius   : 50,

    fillColor: 'orange'

});

// on mouse wheel

$('canvas').mousewheel(function (event)

{

    // store previous view state

    var oldZoom   = view.zoom;

    var oldCenter = view.center;

    // get mouse position

    // it needs to be converted into project coordinates system

    var mousePosition = view.viewToProject(new Point(event.offsetX, event.offsetY));

    // update view zoom

    var newZoom = event.deltaY > 0

                  ? oldZoom * ZOOM_FACTOR

                  : oldZoom / ZOOM_FACTOR;

    view.zoom   = newZoom;

    // update view position

    var offset = (mousePosition - oldCenter) * (1 - (oldZoom / newZoom));

    view.center += offset;

});