Itextファブリックのデフォルトのテキストを削除する方法js

Question

現在、私はfabricjsを使って1つのプロジェクトに取り組んでいます。プロジェクトでは、ファブリックからItextを使ってキャンバスにテキストを追加します。ユーザーがデフォルトテキストをクリックしてからデフォルトテキストを自動的に削除したいとき私はこのコードを使用します。

$("#addText").on("click", function addText() { 
 
    var oText = new fabric.IText('Tap and Type', { 
 
    left: 120, 
 
    top: 120, 
 
    fontFamily: 'Bree Serif', 
 
\t fontSize: 22, 
 
    cache:false 
 
    
 
}); 
 
    \t \t \t $('#oText').css('fontSize', $('#fontSize').val() + 'px'); 
 

 
\t \t \t oText.set({ fill: $(".addText-options .sp-preview-inner").css("background-color") }); 
 
\t \t \t oText.id = 'userDesign'; 
 
\t \t \t canvas.add(oText); 
 
\t \t \t 
 
\t \t \t currentObject.getColor(tinycolor.toRgbString()); 
 
\t \t \t canvas.renderAll(); 
 
\t \t \t saveCanvasState(); 
 
\t })

Answer 1

... フィドル、これを試してみてください：https://jsfiddle.net/Jonah/sbtoukan/1/

var canvas = new fabric.Canvas('container'); 

var oText = new fabric.IText('Tap and Type', { 
    left: 0, 
    top: 0, 
    fontFamily: 'Bree Serif', 
    fontSize: 22, 
    cache:false 
}); 

canvas.on("text:editing:entered", clearText); 

function clearText(e){ 
    if(e.target.type === "i-text"){ 
     if(e.target.text === "Tap and Type"){ 
      e.target.text = ""; 
      canvas.renderAll(); 
     }; 
    } 
    } 

    canvas.add(oText); 

Answer 2

Uは、このコードを試すことができます。

var textFunctions = { 

textEditing: function(e) { 
    if (e.target.type == 'i-text') { 
     if (typeof e.target.text == 'string' && e.target.text == 'Tap and Type') { 
      textFunctions.textChanging(); 
     } else { 
      return false; 
     } 
    } 
}, 
textChanging: function() { 
    return document.onkeydown = function(e) { 
     if (e.target.value == 'Tap and Type') { 
      var obj = canvas.getActiveObject(); 
      obj.selectAll(); 
      obj.setCoords(); 
      canvas.renderAll(); 
     } 
    }; 
}, 

textNull: function(e) { 
    if (e.target.type == 'i-text') { 
     if (typeof e.target.text.length == 'number' && e.target.text.length == 0) { 
      var obj = canvas.getActiveObject(); 
      obj.set({ 'text': 'Tap and Type' }); 
      obj.setCoords(); 
      canvas.renderAll(); 
     } 
    } 
} 
} 

    canvas.on('text:editing:entered', textFunctions.textEditing); 
    canvas.on('text:editing:exited', textFunctions.textNull); 

Answer 3

このフィドルを確認することもできますhttps://jsfiddle.net/xpntggdo/8/私は動的な幅のテキストボックスのような私の側からいくつかの追加の機能を実装しました。この場合、幅はキャンバスの境界に達するまで増加し続けます。

オブジェクト作成時に定義済みの幅を設定した場合、テキストは自動的に次の行に移動することに気付かれるかもしれません。私はこのコードまたはatleastこのコードのいくつかの部分があなたが取り組んでいるものであなたを助けるかもしれないことを願っています。

Answer 4

ファブリック2.0の上記の回答のいくつかを拡張すると、removeChars()が壊れているようです。回避策は次のとおりです。

textObj.on("editing:entered", function (e) { 
    var obj = canvas.getActiveObject(); 
    if(obj.text === DEFAULT_MSG) 
    { 
     obj.selectAll(); 
     obj.text = ""; 
     obj.hiddenTextarea.value = ""; 
     obj.dirty = true; 
     obj.setCoords(); 
     canvas.renderAll(); 
    } 
});