我在 HTML5 画布中呈现了一个图表。到目前为止，工作都很好。现在我需要在触摸设备的图形上实现捏缩放。逻辑是当两根手指分开时，图形会放大，而当手指一起移动时，图形会缩小。在这种情况下，我们需要不断更新轴值。这里的问题是我们如何获得两个手指的单独 X 和 Y 轴值，然后计算要完成的缩放量。例如，对于使用鼠标进行缩放，我们可以在鼠标向下和鼠标向上时获得起始 X 和 Y 值，而在鼠标向上时我们可以获得结束 X 和 Y 轴值。使用 X 和 Y 轴的这个开始和结束值，可以相应地缩放图形。画布不应放大/缩小。放大可以是无限的，但缩小将一直到图表的默认绘制。任何想法或帮助都会非常可观。我没有得到正确的计算。
【问题讨论】：
标签： javascript android ios canvas coffeescript
我已经通过以下方式实现了它。欢迎提出任何建议。
首先，我在开始时获取了两根手指触摸的屏幕坐标，并通过计算其与最顶部和最左侧位置的距离将其转换为相应的视图坐标。之后，我通过以下方式计算了 X 轴的比例和新坐标。
让 d1 和 d2 是初始/开始触摸的数据空间坐标。 newx1 和 newx2 是新触摸的 x 位置。 screenW 是当前屏幕宽度（即屏幕空间中绘图的宽度）。
然后 比例 = (d2 - d1) / (newx2 - newx1)
如果我们使用 newd1, newd2 来表示我们试图计算的新数据范围的最小值和最大值：
newd1 = d1 - newx1 * 比例
newd2 = newd1 + screenW * 比例
同样，我们可以计算新数据范围的 Y 轴最小值和最大值。
【讨论】：
变体 A：
使用像 Hammer.js 这样的 JavaScript 库，它抽象出所有事件处理，并在紧急情况下为您提供事件。这应该是这样的：
var element = document.getElementById('test_el');
var hammertime = Hammer(element).on("pinchout", function(event) {
console.log("Zoom out!!");
// event.scale should contain the scaling factor for the zoom
});
变体 B：
了解touch events 以及如何识别它是否为多点触控。弄清楚什么时候是捏捏的，以及手指移动了多远。 here 写得很好。
【讨论】：
x = touch2.pageX - touch1.pageX 和y = touch2.pageY - touch1.pageY，然后将比例值计算为sqrt of x*x + y*y。在我的情况下，touch1 将是开始坐标，而 touch2 将是结束坐标。如果我误解了，请纠正我。现在，一旦我计算出比例，那么如何将其应用于相应的轴值。