HTML5 Panoramique basé sur le Mouvement de la Souris

Je suis en train de mettre en œuvre la fonctionnalité de "pan" à l'intérieur d'une toile en HTML5 et je ne suis pas sûr au sujet de la meilleure façon d'y parvenir.

Actuellement je suis en train d'essayer de détecter lorsque la souris est sur la toile, et si il est à moins de 10% d'un bord, il se déplace dans cette direction, comme l'a montré:

Courant De Détection De Contours:

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
}

Je sais que je pourrais probablement accomplir ce par la création de chemins à l'intérieur de la toile et de la fixation des événements, mais je n'ai pas travaillé avec lui beaucoup, alors j'ai pensé que je voudrais poser ici. Si un "habillage" pan serait possible, ce serait génial (panoramique vers la gauche pour finalement arriver à la droite).

Résumé: je me demande quel est le meilleur itinéraire pour accomplir "panoramique" est dans le HTML5 Canvas. Ce ne sera pas à l'aide d'images mais de vrais objets dessinés (si cela fait une différence). Je serai heureux de répondre à toutes les questions, si je peux.

Démo:

Démo

OriginalL'auteur Rion Williams | 2011-08-17

  1. 10

    Dépend de comment vous voulez panoramique avec le mouvement de la souris pour être mis en œuvre, mais aujourd'hui, il est souvent 'en temps réel' panoramique que vous pouvez faire glisser autour. J'ai essayé de mettre à jour votre violon un peu: 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

}

    OriginalL'auteur pimvdb

  2. 8

    pimvdb violon montre le concept très bien, mais ne fonctionne pas, du moins pas pour moi.

    Voici une version fixe: http://jsfiddle.net/VWn6t/173/

    La viande c'est fondamentalement la même.

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

    OriginalL'auteur chad