如何在 Fabric.js 上获取鼠标坐标?
Posted
技术标签:
【中文标题】如何在 Fabric.js 上获取鼠标坐标?【英文标题】:How do I get mouse coordinates on 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);
【问题讨论】:
【参考方案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); 的问题 您遇到的具体问题是什么?需要更多信息。 感谢您的来信。我发布了问题并在以下链接***.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);
【讨论】:
这当然是一种可行的方法,但是当您可以使用已经预定义的更简单、更优雅的方法时,它会增加不必要的复杂性。以上是关于如何在 Fabric.js 上获取鼠标坐标?的主要内容,如果未能解决你的问题,请参考以下文章
C#+ARCENGINE,如何获取mapcontrol控件上鼠标点击位置的具体坐标?不是要鼠标的坐标