javascript - 在 Canvas 的某个点放大

Question

我尝试让用户通过捏合手势放大 Canvas ，这是一个 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);
 }

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

这是拖动/移动内容时 Canvas 的平移:

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。

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

Answer 1

如果您存储变换矩阵并在每次更改时使用 setTransform ，这可能会更容易 - 在应用新变换之前先重置 Canvas 变换矩阵，以便您可以更轻松地控制不同转换累积的方式。

var transform = {x: 0, y: 0, scale: 1}
function scaleCanvas(scale, point) { 
    var oldScale = transform.scale;
    transform.scale = scale / transform.scale;

    // Re-centre the canvas around the zoom point
    // (This may need some adjustment to re-centre correctly)
    transform.x += point.x / transform.scale - point.x / oldScale
    transform.y += point.y / transform.scale - point.y / oldScale;

    setTransform();
}
function dragCanvas(x,y) {
    transform.x += x / transform.scale;
    transform.y += y / transform.scale;
    setTransform();
}
function setTransform() {
    ctx.setTransform(transform.scale, 0, 0, transform.scale, transform.x, transform.y);
}

JSFiddle