Question

我尝试让用户使用捏合手势放大画布，这是一个Javascript Canvas游戏（使用Intel XDK）

我得到了点坐标（相对于窗口文档，保存在数组中）和比例“强度”。

var scale = 1;
function scaleCanvas(sc, point) { //point["x"] == 200
            //sc has value like 0.5, 1, 1.5 and so on                
            x = sc/scale;
            scale = sc;

            ctx.scale(x, x);
 }

我知道我必须将画布转换为点坐标，然后再次重新翻译。我的问题是，画布已经翻译过了。翻译值保存在变量dragOffX和dragOffY中。此外，初始转换可能很容易，但是当画布已经缩放时，每个坐标都会改变。

这是拖动/移动内容时画布的转换：

var dragOffX = 0;
var dragOffY = 0;
function dragCanvas(x,y) {      

            dragOffX = dragOffX + x;
            dragOffY = dragOffY + y;

            x = x* 1/scale;
            y = y* 1/scale;
            ctx.translate(x,y);
}

因此当播放器拖动内容时，例如向右100px，dragOffX得到值100。

如何将画布转换为正确的坐标？

Answer 1

只需使用此按钮在轴心点上缩放画布

  function scaleCanvasOnPivotPoint(s, p_x , p_y) { 
            ctx.translate(p_x, p_y);
            ctx.scale(s);
            ctx.translate( -p_x, -p_y);
 }

Answer 2

如果存储变换矩阵并且每次更改时都使用Serializable可能会更容易 - 在应用新变换之前首先重置画布变换矩阵，这样您就可以更轻松地控制不同的转变积累。

setTransform

JSFiddle

在特定点放大画布

2 个答案: