如何正确更改渲染文本的颜色。

Question

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

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