[英]How to correctly change a rendered text's color in fabric.js
我正在嘗試使用 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()">
在功能更改中,我進行了此更改以獲得正確的輸出
function changeColor() {
let cValue = document.getElementById('text-color').value;
// This is the imp line
canvas.getActiveObject()._objects[0].set("fill",cValue);
canvas.renderAll();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.