Question

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

Answer 1

我已按以下方式实施。欢迎任何建议。

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

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

然后 scale =（d2 - d1）/（newx2 - newx1）

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

newd1 = d1 - newx1 * scale

newd2 = newd1 + screenW * scale

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

Answer 2

变体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。

捏缩放触摸设备

2 个答案: