Question

用户点击画布
光标显示用户点击的位置
用户可以输入文字

我尝试在用户点击画布后立即使用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/

Fabricjs：点击画布进入IText

2 个答案: