Fabric.js 激活输入框

本文简介

点赞 + 关注 + 收藏 = 学会了

在 

HTML

 中，

input

 输入框有2种方法自动聚焦，最简单的是在 

input

 标签上添加 

autofocus

 属性。

再次点的方法是使用 

JS

 获取输入框元素，再调用 

focus

 事件选中输入框。

在 

Fabric.js

 中，

IText

 组件也提供了类似的方法。

实操

Fabric.js

 的 

IText

 是一个可编辑文本框，可以在项目运行时输入文字，功能其实和 

HTML

 的 

input

 差不多，都是可以让用户输入。

默认情况

在 

Fabric.js

 中，如果在创建 

IText

 时没有添加文字，在画布上你是很难用肉眼观察出你的输入框在哪的。

<canvas id=&quot;canvasBox&quot; width=&quot;600&quot; height=&quot;600&quot; style=&quot;border: 1px solid #ccc;&quot;></canvas>

<!-- 引入 Fabric.js -->
<script src=&quot;https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js&quot;></script>

<script>
 const canvas = new fabric.Canvas('canvasBox')
 
 const iText = new fabric.IText('', {
 left: 100, // 输入框离画布左侧距离
 top: 100, // 输入框离画布顶部距离
 padding: 7 // 设置输入框内边距
 })
 
 canvas.add(iText) // 将输入框添加到画布中
</script>


此时画布和输入框是被创建出来了，但凭肉眼是很难找到输入框在哪。

激活输入框

想要解决上述问题，可以激活输入框。

// 省略部分代码
iText.enterEditing()


用 

enterEditing()

 方法可以激活输入框。此时可以看到光标所在的位置一闪一闪的。

《enterEditing 文档》

再进一步

使用 

enterEditing()

 后输入框是激活了，也能看到光标一闪一闪。

但这就完了吗？

我们还可以再进一步，配合 

Fabric Canvas

 的 

setActiveObject()

 方法，激活被选中的对象。

这样选中输入框的效果会更加明显。

// 省略部分代码

canvas.add(iText).setActiveObject(iText)

iText.enterEditing()


从上图可以对比出，加上 

setActiveObject()

 后，呈现出来的效果更加明显了。

《setActiveObject 文档》

总结

Fabric.js

 其实并不难，它比起直接使用原生 

Canvas

 要简单多了。

使用 

Fabric.js

 最主要是多看文档，然后把多个 

api

 结合起来使用，就能创造出多种效果~

代码仓库

IText 激活输入框