关于前端:Fabricjs-激活输入框

本文简介

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

在 HTML 中，input 输入框有 2 种办法主动聚焦，最简略的是在 input 标签上增加 autofocus 属性。

再次点的办法是应用 JS 获取输入框元素，再调用 focus 事件选中输入框。

在 Fabric.js 中，IText 组件也提供了相似的办法。

实操

Fabric.js 的 IText 是一个可编辑文本框，能够在我的项目运行时输出文字，性能其实和 HTML 的 input 差不多，都是能够让用户输出。

默认状况

在 Fabric.js 中，如果在创立 IText 时没有增加文字，在画布上你是很难用肉眼察看出你的输入框在哪的。

<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>

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

激活输入框

想要解决上述问题，能够激活输入框。

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

用 enterEditing() 办法能够激活输入框。此时能够看到光标所在的地位一闪一闪的。

《enterEditing 文档》

再进一步

应用 enterEditing() 后输入框是激活了，也能看到光标一闪一闪。

但这就完了吗？

咱们还能够再进一步，配合 Fabric Canvas 的 setActiveObject() 办法，激活被选中的对象。

这样选中输入框的成果会更加显著。

// 省略局部代码

canvas.add(iText).setActiveObject(iText)

iText.enterEditing()

从上图能够比照出，加上 setActiveObject() 后，出现进去的成果更加显著了。

《setActiveObject 文档》

总结

Fabric.js 其实并不难，它比起间接应用原生 Canvas 要简略多了。

应用 Fabric.js 最次要是多看文档，而后把多个 api 联合起来应用，就能发明出多种成果~

代码仓库

⭐IText 激活输入框

举荐浏览

👍《Fabric.js 输入精简的 JSON》

👍《Fabric.js 缩放画布》

👍《Fabric.js IText 设置指定字符色彩和背景色》

👍《console.log 也能插图！！！》

👍《前端须要的收费在线 api 接口》

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