Fabric.js 矩形(基础)

基础图形 矩形

Fabric.js 提供了以下几种基础图形:

🎁 本节案例在线预览 - 基础图形

🎁 本节代码仓库

矩形

Fabric.js 矩形(基础)

<template>
 <canvas width="400" height="375" 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') // 绑定canvas,传入idconst rect = new fabric.Rect({
 top: 100, // 距离容器顶部 100px
 left: 100, // 距离容器左侧 100px
 fill: 'orange', // 填充 橙色
 width: 100, // 宽度 100px
 height: 100 // 高度 100px
 })

 // 将矩形添加到画布中
 canvas.add(rect)
}onMounted(() => {
 init()
})
</script>

使用 new fabric.Rect 创建 矩形

本作品采用《CC 协议》,转载必须注明作者和本文链接
juejin.cn/user/2673620576140030/posts
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

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