8

我正在尝试在 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 内完成“平移”的最佳途径是什么。这不会使用图像，而是使用实际绘制的对象（如果这有什么不同的话）。如果可以的话，我很乐意回答任何问题。

演示：

演示

4

2 回答 2

11

这取决于您希望如何实现通过鼠标移动进行平移，但今天它通常是“实时”平移，您可以随意拖动。我试着稍微更新一下你的小提琴：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

}
于 2011-08-17T17:39:32.263 回答
9

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};
};
于 2013-09-12T06:00:20.630 回答