触摸时的 FabricJS 画布坐标答案

【问题标题】：FabricJS Canvas Coordinates on Touch触摸时的 FabricJS 画布坐标
【发布时间】：2016-08-07 11:46:23
【问题描述】：

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

这是代码：

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

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

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

【问题讨论】：

至少你得到了一些东西，我得到了{x: NaN, y: NaN}

标签： javascript canvas fabricjs

【解决方案1】：

这将为您提供当前位置。

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

【讨论】：

【解决方案2】：

 canvas.on('touch:drag', function(e){
let touch = e.e.touches ? e.e.touches[0] : e.e;
   TouchposX=canvas.getPointer(touch).x
   TouchposY=canvas.getPointer(touch).y
}

感谢 Exlord 帮助我解决了这个问题

【讨论】：