Question

我试图了解缩放的工作原理。我使用Vue和panzoom项目。我发现可以使用smoothZoom功能进行缩放。但是我很难理解应该获取哪些参数。

从Chrome浏览器中，我可以使用以下panzoom功能

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

但是我不明白clientX, clientY, scaleMultiplier的目的是什么。现在，我使用以下功能：

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

但是由于某种原因，它无法按预期缩放，因此可以向左放大，向右放大甚至缩小。我创建newArea如下：

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

我认为我不完全理解参数的含义，可能我的算法无法正常工作。我应该如何更改deltaX，deltaY和newScale使其起作用（我的意思是我应该传递哪些参数）？

Answer 1

好吧，也许我误解了这个问题：

因此smoothZoom方法实际上会调用amator

然后，它要求从当前的scale到scale * scaleMultiplier，({scale}) => zoomAbs(clientX, clientY, scale)的增长中的每个时间增量

zoomAbs然后计算比率，并调用zoomRatio，将x，y和scale赋值，并触发回调并最后调用applyTransform

clientX，clientY将由transformToScreen计算并传递给转换

但是我建议您阅读原始资料以获得更深入的了解

scaleMultiplier是缩放倍数。

空

deltax做CSS translate-x

deltay做CSS translate-y

scale做CSS scale

洞察力

Panzoom 使用CSS变换矩阵：applyTransform

并按照可读规范：matrix(a, b, c, d, tx, ty)

在使用的方差中：

a是x方向的比例因子

b是0

c是0

d是y方向上的比例因子

tx是x方向上的平移

ty是y方向的平移

对于更深入的了解，人们可以仅计算一些示例：

给出一个具有点A，B，C，D的形状。现在，对于任何有效的变换矩阵M，按以下方式计算得到的点A'，B'，C'，D'：

M x A = A'（不违反数学A将会是（0,0,1,1），因此是4x4乘以4x1）

...

M x D = D'

因此详细说明了A =（x，y，1,1）：

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

，并且c = 0：

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

模拟：

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

，且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>

了解Vue中的panzoom

1 个答案: