如何在 fabric.js 中正确更改渲染文本的颜色

Question

我正在尝试使用 fabric.js 并想在文本渲染后更改它的颜色，但它无法正常工作。 我创建了一个文本对象，将其添加到组中，然后对其进行渲染，之后我在更改颜色输入时希望更改文本填充。

js

    function addText(){
    (() => {
        let textValue = document.getElementById("text").value;

        var text = new fabric.IText(textValue, {
            fontSize: 14,
            left: 0,
            top: 0,
            fill: 'red',
            originX: 'left',
            originY: 'left'
        });


        var group = new fabric.Group([text], {
            left: 100,
            top: 100,
            originX: 'center',
            originY: 'center',
            width: 100,
            height: 100,
            objectCaching: false
        });

        canvas.add(group);

        group.on('mousedblclick', () => {
            text.enterEditing();
            canvas.once('selection:cleared', () => {
            text.exitEditing();
            });
        });
    })();
    
    
    canvas.renderAll();
    }

    function changeColor(){
     let cValue = document.getElementById('text-color').value;
     console.log(cValue);
     canvas.getActiveObject().set({fill: cValue});
     canvas.renderAll();
    }

这是html部分

    Add Text :- 
        <input type="text" id="text" name="text" onkeydown="if (event.keyCode == 13) return 
         false;" >
        <button type="button" onclick="addText()">Add Text</button>
        <input type="color" value="" id="text-color" size="10" onchange="changeColor()">

Answer 1

在功能更改中，我进行了此更改以获得正确的输出

function changeColor() {
  let cValue = document.getElementById('text-color').value;

  // This is the imp line
  canvas.getActiveObject()._objects[0].set("fill",cValue);

  canvas.renderAll();
}