Understanding panzoom in Vue

Question

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)?

@TTaJTa4 can you use vue-svg-pan-zoom. If you want I can prepare a demo for you — Varit J Patel
– Varit J Patel, Commented Mar 24, 2019 at 4:49

Estradiaz · Accepted Answer · 2019-03-21 23:13:18Z

Okay maybe i missunderstood the issue:

so the smoothZoom method actually calls amator

this then calls for each timedelta within the growth from the current scale to scale * scaleMultiplier, ({scale}) => zoomAbs(clientX, clientY, scale)

zoomAbs then calculates the ratio and calls zoomRatio wich asigns transform x,y and scale and triggers callbacks and lastly calls applyTransform

clientX, clientY will be calculated by transformToScreen and passed to transform,

but I suggest to read the source to get a deeper insight

scaleMultiplier is the multiplier for the zoom.

~~Short~~

deltax does css translate-x

deltay does css translate-y

scale does css scale

Insight

Panzoom uses css transform matrices: applyTransform

and as per readable specs: matrix(a, b, c, d, tx, ty)

where in the used variance:

a is the scalefactor in x direction

b is 0

c is 0

d is the scalefactor in y direction

tx is the translation in x direction

ty is the translation in y direction

for a deeper knowledge one can just calculate some examples:

Given a shape with point A, B, C, D. Now for any valid transformmatrix M the resulting points A', B', C', D' are calculated this way:

M x A = A' (to not violate math A will be (0,0,1,1) so 4x4 times 4x1)

...

M x D = D'

so in detail for A = (x,y,1,1):

A'.x = A.x * a + A.y * c + 1 * 0 + 1 * tx,

and with c = 0:

A'.x = A.x * a + tx,

analog:

A'.y = A.x * b + A.y * d + 1 * 0 + 1 * ty,

and with b = 0:

A'.y = A.y * d + ty

div { width: 80px; height: 80px; background-color: skyblue; } .changed { transform: matrix(1, 0, 0, 2, 20, 20); background-color: pink; }

<div>Normal</div> <div class="changed">Changed</div>

I think you should add on how to use the panzoom project in order to zoomIn and zoomOut (because that is what the OP asked).

Collectives™ on Stack Overflow

Understanding panzoom in Vue

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related