『Fabric.js 文本框 - 文档』

🎁 本节案例在线预览 - 文本框

🎁 本节代码仓库

复制
<template> 
  <canvas width="400" height="400" id="canvas" style="border: 1px solid #ccc;"></canvas>
</template>
 
<script setup>
import { onMounted } from 'vue'
import { fabric } from 'fabric'
 
function init() {
  const canvas = new fabric.Canvas('canvas')
 
  const textbox = new fabric.Textbox('Lorum ipsum dolor sit amet', {
    width: 250
  })
  canvas.add(textbox)
}
 
onMounted(() => {
  init()
})
</script>

使用 new fabric.Textbox 可以创建文本框。

new fabric.Textbox 第二个参数是对象，使用 width 可以设定了文本框的宽度，文本内容超过设定的宽度会自动换行。

new fabric.Textbox 的内容同样是可编辑的。