toile, vous obtiendrez des points sur les événements de la souris

Je vais avoir la fonction suivante pour obtenir de la souris cliquez sur les positions(coordonnées).

$('#myCanvas').on('click', function(e) {
    event = e;
    event = event || window.event;

    var canvas = document.getElementById('myCanvas'),
            x = event.pageX - canvas.offsetLeft,
            y = event.pageY - canvas.offsetTop;
    alert(x + ' ' + y);
});

J'ai besoin d'obtenir le point de la souris en cliquant sur une position et aussi secound de la souris la position du point après la faisant glisser les mêmes.

ie.,
mousedown point et mouseup points.

OriginalL'auteur ashu | 2013-06-27

  1. 8

    Essayez un peu différente de configuration:

    var canvas = myCanvas;  //store canvas outside event loop
var isDown = false;     //flag we use to keep track
var x1, y1, x2, y2;     //to store the coords

//when mouse button is clicked and held    
$('#myCanvas').on('mousedown', function(e){
    if (isDown === false) {

        isDown = true;

        var pos = getMousePos(canvas, e);
        x1 = pos.x;
        y1 = pos.y;
    }
});

//when mouse button is released (note: window, not canvas here)
$(window).on('mouseup', function(e){

    if (isDown === true) {

        var pos = getMousePos(canvas, e);
        x2 = pos.x;
        y2 = pos.y;

        isDown = false;

        //we got two sets of coords, process them
        alert(x1 + ',' + y1 + ',' +x2 + ',' +y2);
    }
});

//get mouse pos relative to canvas (yours is fine, this is just different)
function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

    Alors, pourquoi devons-nous écouter la souris sur le window? Si vous passez la souris en dehors de la canvas, puis relâchez le bouton de la souris, l'événement ne sera pas enregistré avec le canvas. Nous avons donc besoin d'écouter un événement mondial de l' window.

    Puisque nous avons déjà marqué notre isDown à la souris en bas de l'événement, nous savons que la suite de la souris "appartient" à la toile (comme nous l'avons vérifier la isDown drapeau).

    OriginalL'auteur

  2. 0

    utiliser des récepteurs de type $('#myCanvas').mousedown et $('#myCanvas').mouseup

    OriginalL'auteur Gintas K

  3. 0

    Donc, vous avez besoin de drag'n'drop? Eh bien, c'est très facile: vous permet de détecter de "onclick" si le point à l'intérieur de votre cible (rect, circle, peu importe) point de sauvegarde pour la variable 'onmousemove' vous êtes en déplacement de l'objet et puis "onmousedown" vous êtes l'obtention dernier point.

    Espère que ça va vous aider!

    OriginalL'auteur volter9