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 хорошо показывает концепцию, но на самом деле не работает, по крайней мере, не для меня.

Вот исправленная версия: 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};
};