如何使用自定义钩子访问织物对象以将背景图像添加到画布？

Posted 2023-03-25

【中文标题】如何使用自定义钩子访问织物对象以将背景图像添加到画布？

【英文标题】：How can I access fabric object using custom hook to add background image to canvas?

【发布时间】：2021-11-25 19:59:23

【问题描述】：

所以我正在开发这个编辑器，用户可以在其中上传图像并在画布上进行编辑。为了实现这一点，我使用了 React 和 FabricJS。除了我尝试制作编辑器的所有内容之外，FabricJS 似乎拥有我想要的东西。而且由于 FabricJS 没有对 react 的原生支持，我一直在寻找一种解决方法来使其与 React 一起使用。我偶然发现了这个 answerhere 并尝试使用它。

来自该答案的自定义挂钩消除了添加多个嵌套画布包装器的另一个问题。

现在，如果我只使用背景颜色，它可以正常工作，但是当我尝试添加背景图像时它会引发错误。似乎织物对象不可访问。而且我不确定如何访问它。

这是错误：

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

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

这是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>
     );

【参考方案1】：

您正在调用 .Image.FromUrl 到画布实例而不是织物对象。

试试

fabric.Image.fromUrl...

而不是

fabricCanvas.Image.fromURL