React集成Fabric.js时bringForward与sendBackward函数报错求助

问题根因 #

Fabric.js 中调整对象层级的bringForward、sendBackwards方法是Canvas实例的方法，并非单个图形对象（如Rect）的自有方法。你之前直接调用activeObject.bringForward()，相当于在Fabric对象上调用不存在的方法，因此触发报错。

修正方案 #

将层级调整方法的调用对象从单个图形改为Canvas实例，并传入目标对象作为参数：

1. 修正bringForward函数：

const bringForward = () => {
  if (activeObject && canvas) {
    canvas.bringForward(activeObject);
    canvas.renderAll();
  }
};

2. 修正sendBackward函数：

const sendBackward = () => {
  if (activeObject && canvas) {
    canvas.sendBackwards(activeObject);
    canvas.renderAll();
  }
};

完整修正代码 #

import React, { useEffect, useRef, useState } from 'react';
import { Canvas, Rect } from 'fabric';

const FabricCanvasTest = () => {
  const canvasRef = useRef(null);
  const [canvas, setCanvas] = useState(null);
  const [activeObject, setActiveObject] = useState(null);

  useEffect(() => {
    const initCanvas = new Canvas(canvasRef.current, {
      width: 400,
      height: 400,
      backgroundColor: '#f0f0f0',
      preserveObjectStacking: true,
    });

    const redSquare = new Rect({
      left: 50,
      top: 50,
      fill: 'red',
      width: 100,
      height: 100
    });

    const blueSquare = new Rect({
      left: 200,
      top: 200,
      fill: 'blue',
      width: 100,
      height: 100
    });

    initCanvas.add(redSquare, blueSquare);
    setCanvas(initCanvas);

    initCanvas.on('selection:created', (e) => setActiveObject(e.selected[0]));
    initCanvas.on('selection:updated', (e) => setActiveObject(e.selected[0]));
    initCanvas.on('selection:cleared', () => setActiveObject(null));

    return () => {
      initCanvas.dispose();
    };
  }, []);

  const bringForward = () => {
    if (activeObject && canvas) {
      canvas.bringForward(activeObject);
      canvas.renderAll();
    }
  };

  const sendBackward = () => {
    if (activeObject && canvas) {
      canvas.sendBackwards(activeObject);
      canvas.renderAll();
    }
  };

  return (
    <div>
      <canvas ref={canvasRef} />
      <div>
        <button onClick={bringForward} disabled={!activeObject}>Bring Forward</button>
        <button onClick={sendBackward} disabled={!activeObject}>Send Backward</button>
      </div>
      <p>
        {activeObject
          ? `Selected: ${activeObject.fill} square`
          : 'No object selected'}
      </p>
    </div>
  );
};

export default FabricCanvasTest;

额外说明 #

• 可扩展添加canvas.bringToFront(activeObject)（置顶）、canvas.sendToBack(activeObject)（置底）功能，用法与上述方法一致。
• 增加canvas存在性判断，避免组件初始化阶段canvas为null时的潜在报错。

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