如何删除 Itext Fabric js 中的默认文本答案

【问题标题】：how to remove default text in Itext fabric js如何删除 Itext Fabric js 中的默认文本
【发布时间】：2017-11-11 09:03:49
【问题描述】：

目前我正在使用fabricjs 进行一个项目。在项目中，我使用来自 fabricjs 的 Itext 在画布中添加文本。我想当用户点击默认文本然后自动删除默认文本。我用这个代码。

$("#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();
	})

【问题讨论】：

标签： html5-canvas fabricjs

【解决方案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);

【讨论】：

非常感谢它完美运行。我还有一个问题，如果在明文之后是否可行，有没有办法让带有文本的框保持相同的大小而不是小。
据我所知没有简单的方法。
最好的方法是在你的文本周围添加一个环绕组，在环绕组上设置一个边框，然后让环绕组将点击事件重定向到 iText。当 iText 扩展时，您将不得不扩展组......
谢谢，我认为这对我来说是最好的解决方案。
太棒了！请将问题标记为已回答，祝您有美好的一天！

【解决方案2】：

你也可以看看这个小提琴https://jsfiddle.net/xpntggdo/8/。我已经实现了一些额外的功能，例如动态宽度文本框。在这种情况下，宽度会不断增加，直到到达画布的边界。

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

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

【讨论】：

【解决方案3】：

扩展上述 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();
    }
});

【讨论】：

【解决方案4】：

你可以试试这个代码。

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

【讨论】：