javascript - img - Panning HTML5 basado en el movimiento del mouse

zoom javascript html

Question

Estoy intentando implementar la funcionalidad para "desplazarme" dentro de un lienzo en HTML5 y no estoy seguro de cuál es la mejor manera de lograrlo.

Actualmente, estoy intentando detectar dónde está el mouse en el lienzo, y si está dentro del 10% de un borde, se moverá en esa dirección, como se muestra:

Detección de bordes actual:

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
}

Sé que podría lograrlo creando rutas dentro del lienzo y adjuntando eventos a ellas, pero no he trabajado con ellas demasiado, así que pensé que podría preguntar aquí. Además, si fuera posible una panoramización "envolvente", sería increíble (la panorámica hacia la izquierda finalmente se desplazará hacia la derecha) .

Resumen: Me pregunto cuál es la mejor ruta para lograr el "paneo" dentro del HTML5 Canvas. Esto no usará imágenes sino objetos dibujados reales (si eso hace alguna diferencia). Estaré encantado de responder cualquier pregunta si puedo.

Manifestación:

Manifestación

Answer 1

Depende de cómo quiera que se implemente el paneo con el movimiento del mouse, pero hoy en día es a menudo un paneo en "tiempo real" en el que puede arrastrarse. Traté de actualizar tu violín un poco: 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

El violín de pimvdb muestra el concepto muy bien, pero en realidad no funciona, al menos no para mí.

Aquí hay una versión fija: http://jsfiddle.net/VWn6t/173/
La carne de esto es básicamente lo mismo.

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};
};