如何在Fabric.js上获取鼠标坐标？

Question

我正在尝试读取Fabric.js上的鼠标单击的X坐标。

这是我的代码。 控制台每次都会记录undefined日志。

var canvas = new fabric.Canvas('c1');
canvas.on('mouse:down', function(e){
  getMouse(e);
});

function getMouse(e) {
  console.log(e.clientX);
}

Answer 1

最好的解决方法是这种方法

实现方式：

function getMouseCoords(event)
{
  var pointer = canvas.getPointer(event.e);
  var posX = pointer.x;
  var posY = pointer.y;
  console.log(posX+", "+posY);    // Log to console
}

Answer 2

要基于画布本身上设置的宽度和高度获取坐标，请使用layerX和layerY属性。

canvas.on('mouse:move', function(options) {
    console.log(options.e.layerX, options.e.layerY);
});

Answer 3

尝试这个，

function getMouse(e) {
    console.log(e.e.clientX);
}

演示版

更新，因为canvas events将options作为argument而不是像这样an event ，

canvas.on('mouse:down', function(options){
   getMouse(options);// its not an event its options of your canvas object
});


function getMouse(options) {
    console.log(options);// you can check all options here
    console.log(options.e.clientX);
}

Answer 4

也许这会有所帮助：

//Convert To Local Point
function toLocalPoint(event, canvas) {
var offset = fabric.util.getElementOffset(canvas.lowerCanvasEl), localX = event.e.clientX - offset.left, localY = event.e.clientY - offset.top;
return new fabric.Point(localX, localY);

}

Answer 5

只需使用eeclientX

要么

客户端

获得职位