Question

我希望能够在画布上添加文字并让它直接进入编辑文本模式，光标可见，您可以开始输入。

到目前为止，我已经获得了添加文本并将其设置为活动状态的代码，但我不确定如何进入编辑文本模式。有任何想法吗？谢谢！

    var fabicText = new fabric.IText('Click to change Text', { left: 100, top: 100 });
   fabicText.set({ fill: getSelectedColorText() });
   _fabicCanvas.add(fabicText);

  _fabicCanvas.setActiveObject(fabicText);

Answer 1

您必须使用enterEditing()方法，然后将焦点设置为hiddenTextArea，就像这样

fabicText.enterEditing();
fabicText.hiddenTextarea.focus();

＆＃13;

var _fabicCanvas;

$(function () {
    _fabicCanvas = window._canvas = new fabric.Canvas('canvas');
    var fabicText = new fabric.IText('Click to change Text', {
        left: 100,
        top: 100
    });
    _fabicCanvas.add(fabicText);
    fabicText.set({ fill: 'blue' });
    _fabicCanvas.setActiveObject(fabicText);
    fabicText.enterEditing()
    fabicText.hiddenTextarea.focus();

});

＆＃13;

<script src="https://rawgit.com/kangax/fabric.js/v1.4.5/dist/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="400" height="400" class="canvas"></canvas>

＆＃13;

Answer 2

对于 Android，唯一有效的方法

  Text.on('selected', function () {
    setTimeout(() => {
      Text.enterEditing();
      Text.hiddenTextarea.focus();
    }, 100);
  });

如何激活结构js IText的光标？

2 个答案: