Fabric.js 文本框 Textbox

『Fabric.js 文本框 - 文档』

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

🎁 本节代码仓库

Fabric.js 文本框 Textbox

<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 的内容同样是可编辑的。

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 2

注意规避关键词,在、线 :joy:,我感觉改为 本节案例预览 - 文本框 也挺好的

1年前 评论
德育处主任 (楼主) 1年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!