如何从画布上的某些移动事件中获取X和Y？

I am developing an app with Cordova + Onsen Ui 2 + javascript, but I am getting problems to get the coordinates X and Y from javascript move events. I tried mousemove (it didn't fire) and drag (but I got undefined when I tried to get pageX or clientX from event object). I didn't find any example about drawing with canvas yet. Thanks you all in advance!

我正在开发一个使用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>

3 个解决方案

#1

Try this code. On moving mouse over the canvas the current mouse(x,y) co-ordinates will be printed in screen. Hope this logic only you are looking for.

试试这个代码。在画布上移动鼠标时,将在屏幕上打印当前鼠标(x,y)坐标。希望这个逻辑只有你在寻找。

JsFiddle

HTML

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

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

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

});

#2

Generally you'll want to use event.clientX, event.clientY, and the results of canvas.getBoundingClientRect();. Here's an example, using the MouseMove event:

通常,您需要使用event.clientX,event.clientY和canvas.getBoundingClientRect();的结果。这是一个使用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);
})

This works with all mouse/touch events on all platforms, and accommodates a lot of difficult CSS situations.

这适用于所有平台上的所有鼠标/触摸事件,并适应许多困难的CSS情况。

Live example: http://codepen.io/simonsarris/pen/NNVQpj?editors=1010

实例:http://codepen.io/simonsarris/pen/NNVQpj?edit = 1010

#3

Try this..

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

#1