Fabric.js的交互式文本字段

Question

在过去的几周里，我一直在玩Fabric.js，但关于文本字段，我只发现可以在创建时设置文本。

是否有任何可能的方式来创建一个交互式文本字段，还是我必须找到一个解决方法来实现这一目标？ （随着交互文本字段我的意思是画布的一个区域，我可以点击直接写进去。）

Answer 1

fabric.js的最新版本包含一个类IText，它结合了用于动态编辑和选择文本的交互。请试试下面的代码与最新版本的fabric.js

canvas.add(new fabric.IText('Tap and Type', { 
    fontFamily: 'arial black', 
    left: 100, 
    top: 100 , 
})); 

Answer 2

假设你同时在画布和上下文关系中脚本变量：

// 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); 

Answer 3

我最近使用fabric.js构建了一个思维导图工具，我遇到了同样的问题。

为了实现您所描述的内容（在画布中创建文本元素之后和之后更改文本），我使用jquery来检测keydown事件。假设您已在布料画布中选择了所需的文本元素，以下片段将更改文本。

$(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输入文本元素中一样，并且没有闪烁的光标，因此“虚拟”光标始终位于文本的末尾。

如果你真的想要你可以在文本的末尾画一个闪烁的光标。

Answer 4

试试这个（这是从我的应用程序）：

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, 
     }); 

Answer 5

text.set({ text: newText }); //Change the text 
    canvas.renderAll(); //Update the canvas 

那正是我一直在寻找:)非常感谢！

Answer 6

我猜它太晚了，但这可能对别人有帮助。

There is a demo on fabricjs to do the exact same thing.