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.