了解Vue中的panzoom

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和比例变换并触发回调并最后调用applyTransform

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

但我建议阅读消息来源以获得更深入的见解

scaleMultiplier是缩放的乘数。

短

deltax做css translate-x

deltay做css translate-y

规模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>