theme: smartblue
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第16天,点击查看活动详情
本文简介
点赞 + 关注 + 收藏 = 学会了
在 HTML
中,input
输入框有2种方法自动聚焦,最简单的是在 input
标签上添加 autofocus
属性。
再次点的方法是使用 JS
获取输入框元素,再调用 focus
事件选中输入框。
在 Fabric.js
中,IText
组件也提供了类似的方法。
实操
Fabric.js
的 IText
是一个可编辑文本框,可以在项目运行时输入文字,功能其实和 HTML
的 input
差不多,都是可以让用户输入。
默认情况
在 Fabric.js
中,如果在创建 IText
时没有添加文字,在画布上你是很难用肉眼观察出你的输入框在哪的。
```html
```
此时画布和输入框是被创建出来了,但凭肉眼是很难找到输入框在哪。
激活输入框
想要解决上述问题,可以激活输入框。
js // 省略部分代码 iText.enterEditing()
用 enterEditing()
方法可以激活输入框。此时可以看到光标所在的位置一闪一闪的。
再进一步
使用 enterEditing()
后输入框是激活了,也能看到光标一闪一闪。
但这就完了吗?
我们还可以再进一步,配合 Fabric Canvas
的 setActiveObject()
方法,激活被选中的对象。
这样选中输入框的效果会更加明显。
```js // 省略部分代码
canvas.add(iText).setActiveObject(iText)
iText.enterEditing() ```
从上图可以对比出,加上 setActiveObject()
后,呈现出来的效果更加明显了。
总结
Fabric.js
其实并不难,它比起直接使用原生 Canvas
要简单多了。
使用 Fabric.js
最主要是多看文档,然后把多个 api
结合起来使用,就能创造出多种效果~