在HTML5移动版中进行画布缩放

Question

我目前正在制作游戏，因此需要放大画布。 我已经阅读了很多有关如何使用ctx.scale（）来放大画布的方法，但事实是，我想用两只手指进行缩放。

我已经有了缩放功能，但是它是从顶部/左侧画布进行缩放，而不是在手指中部。 我有手指1和手指2之间的中间点，但是我不知道如何放大该特定的中间点！

这个例子很好地总结了我需要的东西（我只需要缩放）：将画布缩放到鼠标光标

它的工作真的很好，但带轮子！

如果您有任何想法，我会很高兴讲话！ :)

感谢大家！

Answer 1

我添加了touch事件...现在您需要在evt.touches数组中找到所有点的中间（每个属性都有一个clientX和clientY以及其他属性）

您还需要跟踪这些点之间的距离，以更改缩放级别。

此bin可能会帮助您（检查第46行） http://jsbin.com/dived/1/edit?js，输出

Answer 2

如果您有要缩放的中心点，则可以使用CanvasRenderingContext2D提供的转换工具：

void translate(
   in float x,
   in float y
);

因此，当您将画布上下文包含在变量ctx ，

ctx.translate(x, y);

接着

ctx.scale(x, y);

ctx.translate(x, y)将原点放置在x，y坐标上。 默认情况下，CanvasRenderingContext2D的原点为0，0（ http://www.w3.org/TR/2dcontext/ ），因此这就是缩放从左上角开始的原因。