放大在畫布在某一點上

我儘量讓與縮放手勢畫布用戶變焦，這是一個Javascript畫布遊戲（使用英特爾XDK）放大在畫布在某一點上

我得到的點座標（relativley到窗口文檔，保存在一個數組中）和規模「強度」。

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.

如何將我的畫布轉換爲正確的座標？

來源

2015-12-16 wernersbacher

我認爲你需要表現出更多的代碼，就像你是如何翻譯的帆布擺在首位。 – Stuart

下面是一個簡單的縮放技術，不使用翻譯：http://stackoverflow.com/questions/27339747/zoom-and-pan-in-animated-html5-canvas/27340533#27340533 – markE

簡單地使用這個規模在樞軸點帆布

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

來源

2015-12-16 19:48:21

它可能會更容易，如果你存儲轉換矩陣，並使用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

來源

2015-12-16 20:05:44 Stuart

放大在畫布在某一點上

回答

相關問題