基於鼠標移動的HTML5平移

Question

我試圖實現在HTML5中的「平移」畫布內的功能，我不確定要完成它的最佳方式。

目前 - 我想檢測鼠標的位置在畫布上，如果它是一個邊緣的10％之內，它會在這個方向前進，如圖所示：

當前邊緣檢測：

canvas.onmousemove = function(e) 
{ 
    var x = e.offsetX; 
    var y = e.offsetY; 
    var cx = canvas.width; 
    var cy = canvas.height; 
    if(x <= 0.1*cx && y <= 0.1*cy) 
    { 
     alert("Upper Left"); 
     //Move "viewport" to up and left (if possible) 
    } 
    //Additional Checks for location 
} 

我知道我可以在畫布中創建的路徑和附加活動，他們可能做到這一點，但我沒有跟他們多工作，所以我想我會問這裏。另外 - 如果一個「包裝」鍋將是可能的，這將是可怕的（平移到左邊最終會到右邊）。

摘要：我想知道在HTML5 Canvas中完成「平移」的最佳路線是什麼。這將不會使用圖像，但實際繪製的對象（如果這有所作爲）。如果可以，我會很樂意回答任何問題。

演示：

Demo

Answer 1

這取決於你想如何使用鼠標移動平移中實現，但今天它往往是「實時」搖攝，你可以拖動。我試圖更新你的小提琴：http://jsfiddle.net/pimvdb/VWn6t/3/。

var isDown = false; // whether mouse is pressed 
var startCoords = []; // 'grab' coordinates when pressing mouse 
var last = [0, 0]; // previous coordinates of mouse release 

canvas.onmousedown = function(e) { 
    isDown = true; 

    startCoords = [ 
     e.offsetX - last[0], // set start coordinates 
     e.offsetY - last[1] 
    ]; 
}; 

canvas.onmouseup = function(e) { 
    isDown = false; 

    last = [ 
     e.offsetX - startCoords[0], // set last coordinates 
     e.offsetY - startCoords[1] 
    ]; 
}; 

canvas.onmousemove = function(e) 
{ 
    if(!isDown) return; // don't pan if mouse is not pressed 

    var x = e.offsetX; 
    var y = e.offsetY; 

    // set the canvas' transformation matrix by setting the amount of movement: 
    // 1 0 dx 
    // 0 1 dy 
    // 0 0 1 

    ctx.setTransform(1, 0, 0, 1, 
        x - startCoords[0], y - startCoords[1]); 

    render(); // render to show changes 

} 

Answer 2

pimvdb的小提琴顯示了很好的概念，但實際上並沒有正常工作，至少不適合我。

以下是固定版本：http://jsfiddle.net/VWn6t/173/
它的肉基本上是一樣的。

var startCoords = {x: 0, y: 0}; 
var last = {x: 0, y: 0}; 
var isDown = false; 

canvas.onmousemove = function (e) { 
    if(isDown) { 
     ctx.setTransform(1, 0, 0, 1, 
         xVal - startCoords.x, 
         yVal - startCoords.y); 
    } 
}; 

canvas.onmousedown = function (e) { 
    isDown = true; 
    startCoords = {x: e.pageX - this.offsetLeft - last.x, 
        y: e.pageY - this.offsetTop - last.y}; 
}; 

canvas.onmouseup = function (e) { 
    isDown = false; 
    last = {x: e.pageX - this.offsetLeft - startCoords.x, 
      y: e.pageY - this.offsetTop - startCoords.y}; 
};