在Fabric.JS画布中更改IText颜色(使用React +打字稿)

天生的

我有inputtype=color外界Canvas我有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();
  }
查尔斯

首先,在属性填充中定义文本的颜色

然后,您需要使用setrenderAll函数。

这是一个例子

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章