Question

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

＆＃13;

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

＆＃13;

Answer 1

你也可以查看这个小提琴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();
    }
});

Answer 2

试试这个...... 小提琴：https://jsfiddle.net/Jonah/sbtoukan/1/

django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module: /usr/lib64/libperconaserverclient.so.18: version `libperconaserverclient_16' not found (required by /home1/reconess/python/lib/python2.7/site-packages/_mysql.so)

Answer 3

你可以尝试这段代码。

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 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中的默认文本

4 个答案: