javascript - FabricJS Canvas 触摸坐标

Question

我正在使用带有事件的 Fabricjs 包来尝试在用户点击 Canvas 时捕获用户坐标。

这是代码:

HTML

<div id="c-wrapper">
      <canvas id="c"></canvas>
</div>

Javascript

var canvas = new fabric.Canvas("c");
canvas.on({
    "mouse:down": function (o) {
            var pointer = canvas.getPointer(o.e);
            console.info("Mouse Coords: "+pointer.x+" "+pointer.y);
    },
    "touch:longpress": function (ev) {
            console.info("Touch Coords: "+ev.self.x+" "+ev.self.y);
    },
});

当我以响应模式(Chrome 和 Safari 以及设备模拟器)加载页面并测试触摸功能时，我得到的坐标非常不同。

例如

Console output:
Canvas of size 2835 x 2004;

Mouse Coords: 1475 x 1220
Touch Coords: 470 x 388

如您所见，它们是非常不同的结果。

当用户执行长按触摸事件时，如何获取 fabric Canvas 对象的实际坐标？

Answer 1

这将为您提供当前位置。

let e = event.e.touches ? event.e.touches[0] : event.e;
canvas.getPointer(e)