在特定點放大畫布

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

如果存儲轉換矩陣並在每次更改時使用setTransform可能會更容易-在應用新轉換之前先重置畫布轉換矩陣，這樣您就可以更輕松地控制不同轉換的累積方式。

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