触摸时的FabricJS画布坐标

在使用 Fabric.js 时，当用户在触摸设备上触摸屏幕时，您可以通过监听 touchstart、touchmove 和 touchend 事件来获取触摸点的坐标。以下是如何获取触摸点坐标的示例代码：

const canvas = new fabric.Canvas('canvas');

// 监听 touchstart 事件
canvas.on('touchstart', (event) => {
  const touch = event.touches[0]; // 获取第一个触摸点
  const pointer = new fabric.Point(touch.clientX, touch.clientY);
  console.log('Touch start:', pointer);
});

// 监听 touchmove 事件
canvas.on('touchmove', (event) => {
  event.preventDefault(); // 阻止浏览器默认行为，如滚动
  const touch = event.touches[0]; // 获取第一个触摸点
  const pointer = new fabric.Point(touch.clientX, touch.clientY);
  console.log('Touch move:', pointer);
});

// 监听 touchend 事件
canvas.on('touchend', (event) => {
  const touch = event.changedTouches[0]; // 获取最后一个触摸点
  const pointer = new fabric.Point(touch.clientX, touch.clientY);
  console.log('Touch end:', pointer);
});

在这个示例中，我们使用 event.touches[0] 来获取触摸点的坐标。event.touches 是一个包含所有当前触摸点的数组。在 touchstart 和 touchmove 事件中，我们通常只关心第一个触摸点。在 touchend 事件中，我们使用 event.changedTouches[0] 来获取最后一个触摸点的坐标。

请注意，clientX 和 clientY 属性返回的是相对于浏览器窗口的坐标。如果您需要相对于画布的坐标，可以使用以下方法：

const pointer = new fabric.Point(touch.clientX, touch.clientY);
const relativePointer = pointer.subtract(canvas.getPointer().originX, canvas.getPointer().originY);
console.log('Relative touch point:', relativePointer);

这样，您就可以获取触摸时 Fabric.js 画布上的相对坐标了。