无法移动在 react.js 中使用 fabric.js 创建的对象

Question

我在我的 React 应用程序中使用 fabric.js 库。
https://www.npmjs.com/package/fabric

我正在使用织物在画布上添加一个简单的黄色矩形。矩形在画布上以黄色正确显示。那没问题。但我也想移动它（拖动它）。我无法移动/拖动黄色矩形。请帮助。

import React, { useState, useEffect } from "react";
import { fabric } from "fabric";
import "./App.css";
const App = () => {
  const [canvas, setCanvas] = useState("");
  useEffect(() => {
    setCanvas(initCanvas());
  }, []);
  const initCanvas = () =>
    new fabric.Canvas("canvas", {
      height: 800,
      width: 800,
      backgroundColor: "lightgray",
      selection: true
    });

  const addRect = (canvi) => {
    const rect = new fabric.Rect({
      height: 280,
      width: 200,
      fill: "yellow",
      selectable: true
    });
    canvi.add(rect);
    canvi.renderAll();
  };

  return (
    <div>
      <h1>Fabric.js on React - fabric.Canvas('...')</h1>
      <button onClick={() => addRect(canvas)}>Rectangle</button>
      <canvas id="canvas" />
    </div>
  );
};

export default App;

这是我正在关注的教程：
https://aprilescobar.medium.com/part-1-fabric-js-on-react-fabric-canvas-e4094e4d0304

Answer 1

要启用 fabric.js 对象的拖动，您可以将对象的“selectable”和“hasControls”属性设置为“true”。这将允许用户单击并拖动画布上的对象。这是您的代码的更新版本，应该允许您拖动黄色矩形：

import React, { useState, useEffect } from "react";
import { fabric } from "fabric";
import "./App.css";

const App = () => {
  const [canvas, setCanvas] = useState("");

  useEffect(() => {
    setCanvas(initCanvas());
  }, []);

  const initCanvas = () =>
    new fabric.Canvas("canvas", {
      height: 800,
      width: 800,
      backgroundColor: "lightgray",
      selection: true
    });

  const addRect = canvi => {
    const rect = new fabric.Rect({
      height: 280,
      width: 200,
      fill: "yellow",
      selectable: true,
      hasControls: true // enable dragging
    });
    canvi.add(rect);
    canvi.renderAll();
  };

  return (
    <div>
      <h1>Fabric.js on React - fabric.Canvas('...')</h1>
      <button onClick={() => addRect(canvas)}>Rectangle</button>
      <canvas id="canvas" />
    </div>
  );
};

export default App;

在为矩形对象添加“hasControls: true”属性后，您应该能够在画布上单击并拖动黄色矩形。