为什么 Fabric v5 不允许我在 safari 中拖动或调整大小

Question

我使用的是 Safari 版本 15

我创建了一个网页，我希望能够通过

fabric.js

拖动一些文本。

这在 IE (chromium)、Chrome、Brave 和 Firefox 中运行得非常好。我只有一台较旧的 Mac，因此无法在 Safari 15 版本上进行测试。

问题是，我无法拖放文本，也无法调整文本大小，也无法更改文本（这仅是 Safari 的问题）

我没有看到任何错误消息 - 在任何浏览器中控制台中都没有任何内容（没有 JavaScript 问题）。

要复制的代码是

<canvas id="myCanvas" class="myCanvasClass" width="550" height="593"></canvas>

还有 JavaScript：

const _canvas = new fabric.Canvas("myCanvas");

function addText (txt) {

  const tb = new fabric.Textbox(txt, {
      backgroundColor: "#fff",
  });

  _canvas.add(tb);
}

addText("Enter your text");
_canvas.renderAll();

我已经成功地在这个JSFiddle

中重现了这个问题

此代码将

Enter your text

添加到网页，并正确设置其样式。但当我在 Safari 中拖放时，它不会移动，也不会让我调整大小（在 Safari 中），也无法编辑文本（同样，在 Safari 中）

Answer 1

Safari 15 似乎与 Fabric.js 存在一些兼容性问题，特别是在拖动、调整大小和编辑文本对象方面。以下是一些可能有助于解决这些问题的步骤：

1. 启用指针事件：确保在画布初始化时启用指针事件：

    const _canvas = new fabric.Canvas("myCanvas", {
        allowTouchScrolling: true,
    });
   

2. CSS 调整：添加这些 CSS 属性以改善 Safari 中的交互：

   .myCanvasClass {
       touch-action: manipulation;
       -webkit-user-select: none;
       user-select: none;
   }
   

3. 更新 Fabric.js：确保您使用的是最新的 Fabric.js 版本， 因为最近的更新可能会修复 Safari 相关的问题：

   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
   

4. Safari 拖动后备：如果拖动仍然失败，请尝试添加 基本鼠标：移动事件侦听器作为后备：

   _canvas.on("mouse:move", (event) => {
       const activeObject = _canvas.getActiveObject();
       if (activeObject) {
           activeObject.left = event.pointer.x;
           activeObject.top = event.pointer.y;
           activeObject.setCoords();
           _canvas.renderAll();
       }
   });