如何在织物中正确更改渲染文本的颜色.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();
}