过去几周我一直在使用 Fabric.js，但关于文本字段，我发现只能在创建时设置文本。
是否有任何可能的方法来制作交互式文本字段，或者我是否必须找到解决方法来实现这一点？ （对于交互式文本字段，我的意思是画布的一个区域，我可以点击并直接在其中写入。）
【问题讨论】：
假设您在脚本中同时拥有画布和上下文作为变量：
// write text
context.fillText("text1",0,0);
// refresh canvas and write new text
context.clearRect(0,0,canvas.width,canvas.height);
context.fillText("text2",0,0);
【讨论】：
我最近使用fabric.js 构建了一个思维导图工具，我遇到了同样的问题。
为了实现您所描述的（在画布中创建文本元素时和之后更改文本），我使用 jquery 来检测 keydown 事件。假设您在织物画布中选择了所需的文本元素，以下 sn-p 将更改文本。
$(document).keydown(function(e){
var keyPressed = String.fromCharCode(e.which);
var text = canvas.getActiveObject();
if (text)
{
var newText = '';
var stillTyping = true;
if (e.which == 27) //esc
{
if (!text.originalText) return; //if there is no original text, there is nothing to undo
newText = text.originalText;
stillTyping = false;
}
//if the user wants to make a correction
else
{
//Store the original text before beginning to type
if (!text.originalText)
{
text.originalText = text.text;
}
//if the user wants to remove all text, or the element entirely
if (e.which == 46) //delete
{
activeObject.element.remove(true);
return;
}
else if (e.which == 16) { //shift
newText = text.text;
}
else if (e.which == 8) //backspace
{
e.preventDefault();
newText = text.text.substr(0, text.text.length - 1);
}
else if (e.which == 13) //enter
{
//canvas clear selection
canvas.discardActiveObject();
canvas.renderAll();
canvasBeforeSelectionCleared({ memo: { target: text} });
newText = text.text;
stillTyping = false;
}
//if the user is typing alphanumeric characters
else if (
(e.which > 64 && e.which < 91) || //A-Z
(e.which > 47 && e.which < 58) || //0-9
(e.which == 32) || //Space
(keyPressed.match(/[!&()"'?-]/)) //Accepted special characters
)
{
if (text.text == text.originalText) text.text = '';
if (keyPressed.match(/[A-Z]/) && !e.shiftKey)
keyPressed = keyPressed.toLowerCase();
newText = text.text + keyPressed;
}
}
text.set({ text: newText }); //Change the text
canvas.renderAll(); //Update the canvas
if (!stillTyping)
{
this.text.originalText = null;
}
}
});
使用这种技术，我可以在织物画布中选择一个文本元素，开始输入并替换文本。您可以对其进行更改，使其在每次选择元素时都不会删除文本。
这种方法有一些妥协。例如，您不能像在常规 HTML 输入文本元素中一样选择文本并且没有闪烁的光标，因此“虚拟”光标始终位于文本的末尾。
如果你真的想要，你可以在文本末尾画一个闪烁的光标。
【讨论】：
试试这个（这是来自我的应用程序）：
Text Color: <input id="text-color" type="text" value = "#FF0000" name="textColor" />
textColor.onchange = function() {
canvas.getActiveObject().setColor(this.value);
canvas.renderAll();
};
function updateControls() {
textControl.value = canvas.getActiveObject().getText();
}
canvas.on({
'object:selected': updateControls,
});
【讨论】：
text.set({ text: newText }); //Change the text
canvas.renderAll(); //Update the canvas
这正是我想要的 :) 非常感谢！
【讨论】：
fabric.js 的最新版本包括一个 IText 类，它结合了动态编辑和选择文本的交互。使用最新版本的 fabric.js 尝试下面的代码
canvas.add(new fabric.IText('Tap and Type', {
fontFamily: 'arial black',
left: 100,
top: 100 ,
}));
【讨论】：
function is undefined 的错误。我将脚本源更改为指向 cdn http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js 而不是我自己的本地副本，这解决了我的问题。我仍然不确定为什么 IText 不在自定义版本中。
我想为时已晚，但这可能对其他人有帮助。
【讨论】：