如何激活Fabric js IText的光标?

空参考

我希望能够将文本添加到画布,并使文本直接进入编辑文本模式,在该模式下光标可见,您可以开始输入文字。

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

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

  _fabicCanvas.setActiveObject(fabicText);
Dhiraj

您必须使用enterEditing()method,然后像这样将焦点设置在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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

selectize.js-如何禁用选定项目后的闪烁光标?

来自分类Dev

Fabric.js:如何将自定义大小设置为Text或IText?

来自分类Dev

如何设置Fabric.js?

来自分类Dev

fabric.js获取IText对象的“编辑”状态

来自分类Dev

如何为浮动的非激活面板显示调整大小的光标?

来自分类Dev

Fabric.js-分组的iText不可编辑

来自分类Dev

使用Fabric lib时,如何在isDrawingMode期间将光标设置为自定义光标文件

来自分类Dev

Fabric JS:如何防止扩展活动组

来自分类Dev

如何使Fabric.js IText字体不加粗?

来自分类Dev

流星显微镜激活光标

来自分类Dev

Fabric JS-IText对象允许调整大小,但不能缩放

来自分类Dev

Fabric.js如何在不拉伸文本的情况下水平调整IText的大小

来自分类Dev

如何更改chart.js甜甜圈图上的鼠标光标?

来自分类Dev

如何在Tensorflow.JS上激活webgpu后端

来自分类Dev

如何在Typed JS中永久隐藏光标

来自分类Dev

在Fabric.JS画布中更改IText颜色(使用React +打字稿)

来自分类Dev

selectize.js-如何禁用选定项目后的闪烁光标?

来自分类Dev

Synaptics触摸板:如何激活光标动量(不滚动动量)

来自分类Dev

Fabric.js:如何将自定义大小设置为Text或IText?

来自分类Dev

流星显微镜激活光标

来自分类Dev

如何使用fabric.js测量折线?

来自分类Dev

Fabric JS-IText对象允许调整大小,但不能缩放

来自分类Dev

在Fabric JS IText和Textbox之间轻松转换?

来自分类Dev

fabric.IText的画布问题

来自分类Dev

如何在Itext Fabric JS中删除默认文本

来自分类Dev

使用fabric.js更改画布上的绘图光标

来自分类Dev

Fabric js 将 HTML 代码转换为 IText

来自分类Dev

在iText 7中编写文档时如何获得垂直光标位置?

来自分类Dev

如何使用 Vue js 使 Fabric js 具有反应性?

Related 相关文章

  1. 1

    selectize.js-如何禁用选定项目后的闪烁光标?

  2. 2

    Fabric.js:如何将自定义大小设置为Text或IText?

  3. 3

    如何设置Fabric.js?

  4. 4

    fabric.js获取IText对象的“编辑”状态

  5. 5

    如何为浮动的非激活面板显示调整大小的光标?

  6. 6

    Fabric.js-分组的iText不可编辑

  7. 7

    使用Fabric lib时,如何在isDrawingMode期间将光标设置为自定义光标文件

  8. 8

    Fabric JS:如何防止扩展活动组

  9. 9

    如何使Fabric.js IText字体不加粗?

  10. 10

    流星显微镜激活光标

  11. 11

    Fabric JS-IText对象允许调整大小,但不能缩放

  12. 12

    Fabric.js如何在不拉伸文本的情况下水平调整IText的大小

  13. 13

    如何更改chart.js甜甜圈图上的鼠标光标?

  14. 14

    如何在Tensorflow.JS上激活webgpu后端

  15. 15

    如何在Typed JS中永久隐藏光标

  16. 16

    在Fabric.JS画布中更改IText颜色(使用React +打字稿)

  17. 17

    selectize.js-如何禁用选定项目后的闪烁光标?

  18. 18

    Synaptics触摸板:如何激活光标动量(不滚动动量)

  19. 19

    Fabric.js:如何将自定义大小设置为Text或IText?

  20. 20

    流星显微镜激活光标

  21. 21

    如何使用fabric.js测量折线?

  22. 22

    Fabric JS-IText对象允许调整大小,但不能缩放

  23. 23

    在Fabric JS IText和Textbox之间轻松转换?

  24. 24

    fabric.IText的画布问题

  25. 25

    如何在Itext Fabric JS中删除默认文本

  26. 26

    使用fabric.js更改画布上的绘图光标

  27. 27

    Fabric js 将 HTML 代码转换为 IText

  28. 28

    在iText 7中编写文档时如何获得垂直光标位置?

  29. 29

    如何使用 Vue js 使 Fabric js 具有反应性?

热门标签

归档