存储和检索 Fabric.js 项目

Question

详细信息：我们将 Fabric.js 与 React 集成，以允许在画布上绘图。然而，我们现在面临的挑战是将画布数据保存在数据库中并检索它，同时保留元素的自定义属性和事件侦听器。

.

尝试并期待：存储整个画布对象并在项目打开时获取它以进行渲染。虽然我们能够在画布上渲染对象，但我们无法检索与它们关联的自定义属性或事件侦听器。 我们正在寻求有关如何有效存储和检索具有完整自定义属性和事件侦听器的 Fabric.js 项目的指导。任何实现这一目标的见解或替代方法将不胜感激

Answer 1

我尝试将与你相同的方法应用到我的项目中，但最终使用了保存和加载画布对象并同时注册事件监听器的方法。

假设画布对象已保存并加载，您可以立即注册事件监听器，如下所示。

const canvas = new fabric.Canvas(/* your canvas object parameter */);

// This is a function that registers a listener for canvas.
const addCanvasEvent = () => {
  // ... your codes
};

// This is a function that loads and initializes the canvas.
const loadCanvasObject = (canvasObject) => {
canvas.loadFromJSON(JSON.parse(canvasObject), () => {
    addCanvasEvent();
  });
};

我希望这有助于回答您的问题。如果有人有更好的解决方案，请分享。谢谢你:)