如何删除 Itext fabric js 中的默认文本

Question

目前我正在使用 fabricjs 进行一个项目。在项目中，我使用 fabricjs 中的 Itext 在 canvas 中添加文本。我希望当用户单击默认文本时自动删除默认文本。我用这个代码。

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

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

Answer 1

试试这个... Fiddle: 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

你可以试试这个代码。

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

您也可以查看此 fiddle https://jsfiddle.net/xpntggdo/8/ 。我已经从我这边实现了一些附加功能，例如动态宽度文本框。在这种情况下，宽度不断增加，直到达到 canvas 的边界。

您可能已经注意到，如果您在创建对象时设置了预定义的宽度，文本会自动转到下一行。我希望这段代码或至少这段代码的某些部分可以帮助您完成任何工作。

textBox.on("editing:entered", function (e) {
    var obj = canvas.getActiveObject();
    console.log("entered editing");
    if(obj.text == "Enter Text")
    {
        obj.selectAll();
        obj.removeChars();
    }
});

Answer 4

扩展上面针对 Fabric 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();
    }
});

如何删除 Itext fabric js 中的默认文本

how to remove default text in Itext fabric js

html5-canvas

fabricjs