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

【问题标题】：How do I get mouse coordinates on Fabric.js?如何在 Fabric.js 上获取鼠标坐标？
【发布时间】：2013-12-26 02:43:55
【问题描述】：

我正在尝试读取鼠标点击 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);
}

【问题讨论】：

标签： javascript jquery html5-canvas fabricjs

【解决方案1】：

最好的解决方法是this 方法

实施：

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

【讨论】：

如何在 mozzila 上进行这项工作我遇到了 var pointer = canvas.getPointer(event.e); 的问题
您遇到的具体问题是什么？需要更多信息。
感谢您的来信。我发布了问题并在以下链接stackoverflow.com/questions/41636200/… 上获得了答案

【解决方案2】：

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

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

【讨论】：

谢谢！您是否有将画布平移和缩放考虑在内的示例？

【解决方案3】：

试试这个，

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

Demo

已更新，因为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);
}

【讨论】：

像魅力一样工作。为什么选择 e.e.clientX？

【解决方案4】：

只需使用 e.e.clientX

或

e.e.clientY

获取职位

【讨论】：

已经有另一个答案使用相同的解决方案和解释。这个答案没有添加任何新内容

【解决方案5】：

也许这会有所帮助：

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

}

【讨论】：

这当然是一种可行的方法，但是当您可以使用已经预定义的更简单、更优雅的方法时，它会增加不必要的复杂性。