基础图形 矩形

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，传入id
​
  const 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 创建 矩形。