本文简介
点赞 + 关注 + 收藏 = 学会了
在 HTML 中，input 输入框有2种方法自动聚焦，最简单的是在 input 标签上添加 autofocus 属性。
再次点的方法是使用 JS 获取输入框元素，再调用 focus 事件选中输入框。
在 Fabric.js 中，IText 组件也提供了类似的方法。
实操
Fabric.js 的 IText 是一个可编辑文本框，可以在项目运行时输入文字，功能其实和 HTML 的 input 差不多，都是可以让用户输入。
默认情况
在 Fabric.js 中，如果在创建 IText 时没有添加文字，在画布上你是很难用肉眼观察出你的输入框在哪的。
file
<canvas id="canvasBox" width="600" height="600" style="border: 1px solid #ccc;"></canvas>
<!-- 引入 Fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>
<script>
const canvas = new fabric.Canvas('canvasBox')
const iText = new fabric.IText('', {
left: 100, // 输入框离画布左侧距离
top: 100, // 输入框离画布顶部距离
padding: 7 // 设置输入框内边距
})
canvas.add(iText) // 将输入框添加到画布中
</script>
此时画布和输入框是被创建出来了，但凭肉眼是很难找到输入框在哪。
激活输入框
想要解决上述问题，可以激活输入框。
file
// 省略部分代码
iText.enterEditing()
用 enterEditing() 方法可以激活输入框。此时可以看到光标所在的位置一闪一闪的。
再进一步
使用 enterEditing() 后输入框是激活了，也能看到光标一闪一闪。
但这就完了吗？
我们还可以再进一步，配合 Fabric Canvas 的 setActiveObject() 方法，激活被选中的对象。
这样选中输入框的效果会更加明显。
file
// 省略部分代码
canvas.add(iText).setActiveObject(iText)
iText.enterEditing()
从上图可以对比出，加上 setActiveObject() 后，呈现出来的效果更加明显了。
总结
Fabric.js 其实并不难，它比起直接使用原生 Canvas 要简单多了。
使用 Fabric.js 最主要是多看文档，然后把多个 api 结合起来使用，就能创造出多种效果~
代码仓库
推荐阅读
👍《Fabric.js IText设置指定字符颜色和背景色》
点赞 + 关注 + 收藏 = 学会了
