更改 Fabric.JS canvas 中的 IText 颜色（使用 React + typescript）

Question

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

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

更改 Fabric.JS canvas 中的 IText 颜色（使用 React + typescript）

Change IText color in Fabric.JS canvas (using React + typescript)

html

typescript

canvas

fabricjs