Understanding panzoom in Vue

I'm trying to understand how zooming works. I use Vue and the panzoom project. I found out that I can use the smoothZoom function in order to zoom. But I struggle to understand which parameters it should get.

From chrome I see that I can use the following function of panzoom

ƒ smoothZoom(clientX, clientY, scaleMultiplier) {
      var fromValue = transform.scale
      var from = {scale: fromValue}
      var to = {scale: scaleMultiplier * fromValue}

But I don't understand what is the purpose of clientX, clientY, scaleMultiplier. For now, I use the function as following:

var transform = this.newArea.getTransform();
var deltaX = transform.x;
var deltaY = transform.y;
var scale = transform.scale;
var newScale = scale + this.minScale; // minScale is set to 0.2
this.newArea.smoothZoom(deltaX,deltaY,newScale);

But for some reason it does not zoom as expected, it could zoom in left, zoom in right, even zoom out. I create newArea as following:

const area = document.querySelector('.chart');
this.newArea = panzoom(area, { maxZoom: this.maxZoom, minZoom: this.minZoom, zoomSpeed: this.zoomSpeed });

I think that I don't fully understand the meaning of the arguments and probably my algorithm does not work. How should I change the deltaX, deltaY and newScale so it work (I mean which arguments should I pass)?

from Understanding panzoom in Vue

Understanding panzoom in Vue 2019-03-17T01:02:00-07:00 Rating: 4.5 Diposkan Oleh: Admin