Question

我正在使用带有事件的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以及设备模拟器）加载页面并测试触摸功能时，我会得到非常不同的坐标。

e.g。

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)

Answer 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帮我弄清楚了

FabricJS Canvas坐标触摸

2 个答案: