在 Fabric.JS 画布中更改 IText 颜色（使用 React + typescript）

Question

我在Canvas 外面有input 和type=color。我有canvas 和一个或多个IText 对象（以及其他对象）。我想要实现的是“在输入更改时，更改所选文本对象的颜色”。

这是我在 React 中的输入

<input type="color" defaultValue={defaultTextColor} ref={myRef} onChange={handleColorChange} />

我可以更改“文本”，但不能更改颜色...

这是我的换色活动

const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newColor = e.currentTarget.value;
    canvas.getActiveObjects().forEach((element: any) => {
      if(element.type == 'i-text') {
          element.color = newColor; //this doesn't work
          element.text = "new"; // this works
      }
    });
    
    canvas.renderAll();
  }

Answer 1

首先，文本的颜色在属性fill

中定义

那么你需要使用set和renderAll函数。

这是一个例子

        var canvas = new fabric.Canvas("canvas");
        var myText = new fabric.Text("Hello", {
            top: 100,
            left: 100,
            width: 60,
            height: 70,
            fill: "red",
        });
        setTimeout(() => {
            myText.set("fill", "green");
            canvas.renderAll();
        }, 2000);

        canvas.add(myText);