基于鼠标移动的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中完成"平移"的最佳途径是什么。这不会使用图像，但实际绘制的对象(如果有任何区别)。如果可以，我很乐意回答任何问题。

演示:

演示

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的fiddle很好地展示了这个概念，但实际上不起作用，至少对我来说不起作用。

这是一个固定的版本: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};
};