为了账号安全,请及时绑定邮箱和手机立即绑定

Fabric.js 激活输入框

本文简介

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


HTML 中,input 输入框有2种方法自动聚焦,最简单的是在 input 标签上添加 autofocus 属性。

再次点的方法是使用 JS 获取输入框元素,再调用 focus 事件选中输入框。

Fabric.js 中,IText 组件也提供了类似的方法。



实操

Fabric.jsIText 是一个可编辑文本框,可以在项目运行时输入文字,功能其实和 HTMLinput 差不多,都是可以让用户输入。


默认情况

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 CanvassetActiveObject() 方法,激活被选中的对象。

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

file

// 省略部分代码

canvas.add(iText).setActiveObject(iText)

iText.enterEditing()

从上图可以对比出,加上 setActiveObject() 后,呈现出来的效果更加明显了。



总结

Fabric.js 其实并不难,它比起直接使用原生 Canvas 要简单多了。

使用 Fabric.js 最主要是多看文档,然后把多个 api 结合起来使用,就能创造出多种效果~



代码仓库



点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消