Comment puis-je obtenir le X et Y à partir de certains événements de mouvement sur toile?

Question

Je suis en train de développer une application avec Cordova + Onsen Ui 2 + javascript, mais j'ai des problèmes pour obtenir les coordonnées X et Y à partir des événements javascript move. J'ai essayé mousemove (il n'a pas tiré) et faites glisser (mais je n'ai pas défini quand j'ai essayé d'obtenir pageX ou clientX de l'objet d'événement). Je n'ai pas encore trouvé d'exemple sur le dessin avec canvas. Merci à vous tous d'avance!

Javascript:

var canvasListener = function(){  
    canvas = document.getElementById("canvas");  
    canvas.addEventListener('mousedown', function(event){ 
     var coordinates = painting(event);   
    }); 
    canvas.addEventListener('drag', function(event){ 
      var coordinates = painting(event); 
    }); 
    canvas.addEventListener('mouseup', function(event){ 
     var coordinates = painting(event); 
    }); 
} 

function painting(event){ 
    var x = event.clientX; 
    var y = event.clientY; 
    var touchX = x - signatureCanvas.offsetLeft; 
    var touchY = y - signatureCanvas.offsetTop; 
    var localCoordinates;  
    if(event.type == 'mouseup'){ 
     localCoordinates = { 
      x: 0, 
      y: 0 
     }; 
    }else{ 
     localCoordinates = { 
      x: touchX, 
      y: touchY 
     }; 
    }  
    return localCoordinates; 
} 

Html:

<canvas id="canvas"></canvas> 

Answer 1

Essayez ce code. En déplaçant la souris sur la toile, les coordonnées actuelles de la souris (x, y) seront imprimées à l'écran. J'espère que cette logique est la seule que vous cherchez.

JsFiddle

HTML

<canvas width="300" height="225"></canvas> 

<span class="first">Move the mouse over the div.</span> 
<span></span> 

JS

var canvas = $('canvas'); 
canvas.mousemove(function(e){ 
    var pageCrds = '('+ e.pageX +', '+ e.pageY +')', 
     clientCrds = '('+ e.clientX +', '+ e.clientY +')'; 

    $('span:first').text('(e.pageX, e.pageY) - '+ pageCrds);  
    $('span:last').text('(e.clientX, e.clientY) - '+ clientCrds); 

}); 

Answer 2

En général, vous aurez envie d'utiliser event.clientX, event.clientY, et les résultats de canvas.getBoundingClientRect();. Voici un exemple, en utilisant l'événement MouseMove:

can.addEventListener('mousemove', function(e) { 
    var canwidth = can.width; 
    var canheight = can.height; 
    var bbox = can.getBoundingClientRect(); 
    var mx = e.clientX - bbox.left * (canwidth/bbox.width); 
    var my = e.clientY - bbox.top * (canheight/bbox.height); 

    // output it to see results: 
    ctx.fillRect(mx, my, 1, 1); 
}) 

Cela fonctionne avec tous souris/événements tactiles sur toutes les plateformes, et peut accueillir un grand nombre de situations CSS difficiles.

Un exemple concret: http://codepen.io/simonsarris/pen/NNVQpj?editors=1010

Answer 3

Essayez cette ..

var damagesCanvas = document.getElementById('damagesCanvas'); 

damagesCanvas.addEventListener('click', function (evt) { 
    var pos = getMousePos(damagesCanvas, evt); 
}, false); 

function getMousePos(damagesCanvas, evt) { 
    var rect = damagesCanvas.getBoundingClientRect(); 
    return { 
     X: evt.clientX - rect.left, 
     Y: evt.clientY - rect.top 
    }; 
}