Fabricjs：通过单击画布输入 IText

Question

this jsfiddle 的目标如下：

• 用户在画布上的点击次数
• 光标显示在用户点击的地方
• 用户可以输入文字

我尝试在用户单击画布后立即使用 IText enterEditing 方法，但光标没有出现，因此用户不知道他们可以输入文本。此外，在 Chrome 和 Firefox 中，用户根本无法输入文本。有什么想法吗？

Javascript

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

canvas.on('mouse:down', function(options) {
    if (options.target == null) 
         addText(options.e);
});


function addText(e) {

        var text = new fabric.IText('',{
            left: e.offsetX,
            top: e.offsetY
        });

        canvas.add(text);
        text.enterEditing();
}

Answer 1

试试下面的代码，你需要将你的文本对象设置为画布中的活动对象。

var text = new fabric.IText('',{
  left: e.offsetX,
  top: e.offsetY
});
canvas.add(text).setActiveObject(text);
text.enterEditing();

Answer 2

试试这个我用这段代码更新的小提琴，希望它能对你有所帮助

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

canvas.on('mouse:down', function(options) {

    if (options.target == null) 
        addText(options.e);
});


function addText(e) {

  var custontxt=new fabric.IText('Tap and Type', { 
  fontFamily: 'helvetica',
  fontSize:30,
  fontWeight:400,
  fill:'red', 
  fontStyle: 'normal', 
  top:250,
  cursorDuration:500,    
  left:250,    
});  
canvas.add(custontxt);
}

http://jsfiddle.net/hsLwjtbx/16/