如何激活 fabric js IText 的光标？

Question

我希望能够将文本添加到 canvas 并让它直接进入编辑文本模式，在该模式下光标可见，您可以开始输入。

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

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

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

});

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

Answer 2

对于Android，唯一有效的方法

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

如何激活 fabric js IText 的光标？

How to activate the cursor for a fabric js IText?

html

html5-canvas

fabricjs