どのようにキャンバス上のいくつかの移動イベントからXとYを得ることができますか？

Question

私はCordova + Onsen Ui 2 + javascriptでアプリケーションを開発していますが、javascriptの移動イベントから座標XとYを取得する際に問題が発生しています。私はmousemove（それは起動しませんでした）とドラッグ（しかし、私はイベントオブジェクトからpageXまたはclientXを取得しようとすると未定義になりました）。キャンバスで描くことについての例はまだ見つかりませんでした。あらかじめありがとうございました！

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

このコードを試してみてください。キャンバス上でマウスを動かすと、現在のマウス（x、y）の座標が画面に表示されます。この論理だけがあなたが探していることを願っています。

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

一般的にあなたがevent.clientX、event.clientYを使いたい、とcanvas.getBoundingClientRect();の結果でしょう。

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

これはすべてのプラットフォーム上のすべてのマウス/タッチイベントで動作し、多くの困難なCSS状況に対応しています。

ライブ例：http://codepen.io/simonsarris/pen/NNVQpj?editors=1010

Answer 3

はこれを試してみてください。..

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