时间戳

首页 > 解决方案 > 了解 Vue 中的 panzoom

javascript - 了解 Vue 中的 panzoom

问题描述

我试图了解缩放的工作原理。我使用 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

标签： javascriptzooming

解决方案

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

所以该smoothZoom方法实际上调用了amator

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

zoomAbs 然后计算比率并调用 zoomRatio 分配变换 x、y 和缩放并触发回调，最后调用applyTransform

clientX、clientY 会通过transformToScreen计算并传递给 transform，

但我建议阅读源代码以获得更深入的了解

scaleMultiplier 是缩放的乘数。

短的

deltax 做 csstranslate-x

deltay 做 csstranslate-y

规模做cssscale

洞察力

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 = Ax * a + Ay * c + 1 * 0 + 1 * tx，

并且 c = 0：

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

模拟：

  • A'.y = Ax * b + Ay * d + 1 * 0 + 1 * ty，

并且 b = 0：

  • A'.y = Ay * 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>

推荐阅读