Fabric js编辑通过输入添加到画布中的文本

Question

我在反应应用程序中使用fabricjs 和fabricjs-react。 我需要通过输入编辑文本。 但它不起作用。 也许我错过了什么？ 但是当我在输入中输入文本时，画布没有更新，文本保持不变。 我究竟做错了什么？ 如何访问fabricjs中的现有文本？

有我的代码https://codesandbox.io/s/sleepy-stitch-yvcr22

UPD：我尝试添加 ID 来做https://codesandbox.io/s/clever-christian-zxb5ge 。 有用。 也许有一些更通用的解决方案？

import React, { useEffect, useState } from 'react'
import { FabricJSCanvas, useFabricJSEditor } from 'fabricjs-react'
import { fabric } from 'fabric'


export default function App() {
  const { editor, onReady } = useFabricJSEditor()

  const [text, setText] = useState('')
  let headText = new fabric.Text("test", {
    fill: 'black',
    top: 50,
    left: 50,
  })

  const _onReady = (canvas) => {
    canvas.backgroundColor = 'yellow'
    canvas.setDimensions({
      width: 200,
      height: 200,
    })
    canvas.add(headText);
    canvas.renderAll()
    onReady(canvas)
  }

  useEffect(() => {
    if (editor) {
      headText.text = text
      editor.canvas.renderAll()
    }
  }, [text])

  return (
    <>
        <input onChange={(e) => setText(e.target.value)} />
        <FabricJSCanvas onReady={_onReady} />
    </>
  )
}

Answer 1

它不起作用的原因是每当调用 setText() 状态时，都会再次调用 App() 函数以呈现状态更改。

这就是问题所在； 对 App() 的任何子序列调用最终都会创建一个新的 headText 实例

let headText = new fabric.Text("test", {
    fill: 'black',
    top: 50,
    left: 50,
})

您的 useEffect 正在使用该新实例，而画布包含第一个实例。 因此，您尝试的任何更改都指的是错误的对象。

这个快速脏检查证明这是一个不同的对象：

useEffect(() => {
  if (editor) {
    editor.canvas.getObjects()[0].text = text;
    editor.canvas.renderAll()

    console.log(editor.canvas.getObjects()[0] === headText);
  }
}, [text])

解决方案是您需要为 headText 提供自己的状态，以便保留对 App() 对象引用的任何子序列调用。

const [headText, setTextObject] = useState(
new fabric.Text('test', {
   fill: 'black',
   top: 50,
   left: 50,
 }));