Estoy probando fabric.js y quería cambiar el color del texto después de haberlo renderizado, pero no funciona correctamente. Creé un objeto de texto, lo agregué al grupo y luego lo rendericé, después de eso, tengo una entrada de color cuando se cambia. Quiero que cambie el relleno de texto.
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(); }Y aquí está la parte 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()">En el cambio de función hice estos cambios para obtener la salida correcta
function changeColor() { let cValue = document.getElementById('text-color').value; // This is the imp line canvas.getActiveObject()._objects[0].set("fill",cValue); canvas.renderAll(); }