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

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

How to correctly change a rendered text's color in fabric.js

javascript

jquery

canvas

fabricjs