javascript - 在触摸设备上捏合缩放

Question

我在 HTML5 Canvas 中呈现了一个图形。到目前为止，工作还不错。现在我需要在触摸设备的图形上实现捏合缩放。逻辑是当两个手指分开时图形放大，当手指一起移动时图形缩小。在这种情况下，我们需要不断更新轴值。这里的问题是我们如何获得两个手指各自的 X 和 Y 轴值，然后计算要完成的缩放量。例如，对于使用鼠标进行缩放，我们可以在鼠标按下时获得起始 X 和 Y 值，在鼠标弹起时我们获得结束 X 和 Y 轴值。使用 X 轴和 Y 轴的起始值和结束值，可以相应地缩放图形。 Canvas 不应放大/缩小。放大可以是无限的，但缩小将是直到图形的默认绘图。任何想法或帮助都会非常可观。我没有得到正确的计算。

Answer 1

我已经通过以下方式实现了它。欢迎提出任何建议。

首先，我获取了开始时两个手指触摸的屏幕坐标，并通过计算它与最顶部和最左侧位置的距离将其转换为相应的 View 坐标。之后，我按以下方式计算了 X 轴的比例和新坐标。

让d1 和 d2 是初始/开始触摸的数据空间坐标。newx1 和 newx2 是新触摸的 x 位置。screenW 是当前屏幕宽度(即屏幕空间中绘图的宽度)。

然后规模 = (d2 - d1)/(newx2 - newx1)

如果我们使用 newd1、newd2 来表示我们尝试计算的新数据范围的最小值和最大值:

newd1 = d1 - newx1 * 比例

newd2 = newd1 + screenW * 比例

类似地，我们可以计算新数据范围的 Y 轴最小值和最大值。