Fabric.js+React环境下画布元素无法交互问题求助

你遇到的核心问题是文本元素的创建与添加逻辑错误，导致实际添加到画布的不是正常的Fabric文本实例，自然无法交互。下面是具体的修复步骤和说明：

1. 修复文本元素的创建代码 #

你的AddText组件中，canvas.add()方法返回的是Canvas实例本身，而不是你创建的文本对象，后续又重复调用canvas.add(textBox)等于把Canvas实例错误地添加到画布中，这是根本问题。

修改后的AddText组件代码：

import React, { useContext } from "react";
import canvasContext from "../../context/canvasContext";
import { fabric } from "fabric";

const AddText = () => {
  const { canvas } = useContext(canvasContext);
  const onAddText = () => {
    // 先创建文本实例
    const textBox = new fabric.Text("Tap To Edit", {
      left: 100,
      top: 100,
      fontFamily: "arial black",
      fill: "#333",
      fontSize: 50,
      // 以下属性为默认值，明确写出更直观
      selectable: true,
      evented: true,
      editable: true
    });
    // 将文本实例添加到画布
    canvas.add(textBox);
    // 可选：添加后自动选中文本，提升交互体验
    canvas.setActiveObject(textBox);
    canvas.renderAll();
  };
  return <div onClick={onAddText}>Add Text</div>;
};

export default AddText;

2. 确认Canvas的交互配置 #

Fabric.js的Canvas默认开启交互，可检查初始化配置确保没有禁用相关属性：

const canvas = new fabric.Canvas("canvas", {
  height: 800,
  width: 1200,
  selectionLineWidth: 1,
  controlsAboveOverlay: true,
  centeredScaling: true,
  // 以下为默认值，确保未设为false
  interactive: true,
  enableRetinaScaling: true
});

3. 优化React Context的依赖 #

在CanvasApp的useLayoutEffect中，建议把setCanvas加入依赖数组（符合React Hooks规范），同时添加组件卸载时的Canvas销毁逻辑：

useLayoutEffect(() => {
  const canvas = new fabric.Canvas("canvas", {
    height: 800,
    width: 1200,
    selectionLineWidth: 1,
    controlsAboveOverlay: true,
    centeredScaling: true,
  });
  canvas.renderAll();
  setCanvas(canvas);

  // 组件卸载时销毁Canvas实例
  return () => {
    canvas.dispose();
  };
}, [setCanvas]);

问题根源说明 #

你之前错误地将Canvas实例作为元素添加到画布，而非创建的Text实例，这个错误的"元素"不具备Fabric对象的交互属性，因此无法选中、编辑或拖拽。修复创建和添加逻辑后，正常的Text实例默认支持选中、拖拽和双击编辑（如需即时编辑，可调用textBox.enterEditing()）。

内容的提问来源于stack exchange，提问作者Rhythm Shandlya