如何使用自定义挂钩访问结构对象以将背景图像添加到 canvas？

Question

所以我正在开发这个编辑器，用户可以在其中上传图像并在 canvas 上进行编辑。为此，我使用了 React 和 FabricJS。除了我尝试制作编辑器的一切之外，FabricJS 似乎拥有我想要的东西。由于 FabricJS 没有对 React 的本机支持，我一直在寻找一种解决方法来使其与 React 一起工作。我在这里 answer 偶然发现了这个并尝试使用它。

该答案中的这个自定义挂钩消除了另一个问题，即添加多个嵌套 canvas 包装器。

现在如果我只使用背景颜色它工作正常但是当我尝试添加背景图像时它会抛出错误。似乎无法访问结构对象。而且我不确定如何访问它。

这是错误：

TypeError: Cannot read properties of undefined (reading 'fromURL')

因此，如果有人知道如何使用织物对象向 canvas 添加背景图像或不同形状，但也使用此钩子，因为它消除了嵌套的织物包装纸，所以我会在这里发帖。

这是 CodeSandbox。

代码如下：

import { useCallback, useRef } from "react";
import { fabric } from "fabric";

const useFabric = (onChange) => {

    const fabricRef  = useRef();
    const disposeRef = useRef();

    return useCallback((node) => {
        if (node) {
             fabricRef.current = new fabric.Canvas(node);

             if (onChange) {
                  disposeRef.current = onChange(fabricRef.current);
             }

         } else if (fabricRef.current) {

              fabricRef.current.dispose();

              if (disposeRef.current) {
                   disposeRef.current();
                   disposeRef.current = undefined;
              }
         }
     }, []);

};


export default function App() {

     const ref = useFabric((fabricCanvas) => {

           fabricCanvas.backgroundColor = "green";

           // fabricCanvas.Image.fromURL("https://i.imgur.com/8zvUjul.jpg", function ( img ) {
           //     fabricCanvas.add(img);
           //     fabricCanvas.sendToBack(img);
           // });

          fabricCanvas.renderAll();
     });

     return (
         <div>
             <canvas ref={ref} id="canvas" />
         </div>
     );
}

Answer 1

您正在调用 .Image.FromUrl 到 canvas 实例而不是 fabric 对象。

尝试

fabric.Image.fromUrl...

而不是

fabricCanvas.Image.fromURL

如何使用自定义挂钩访问结构对象以将背景图像添加到 canvas？

How can I access fabric object using custom hook to add background image to canvas?

javascript

canvas

fabricjs

reactjs