Fabric.js 绘制路径

『Fabric.js 路径Path - 文档』

🎁 本节案例预览 - 绘制路径

🎁 本节代码仓库

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

  // 绘制路径
  const path = new fabric.Path('M 0 0 L 200 100 L 170 200 z')
  path.set({
    top: 50, // 距离容器顶部距离 50px
    left: 50, // 距离容器左侧距离 50px
    fill: 'hotpink', // 填充 亮粉色
    opacity: 0.5, // 不透明度 50%
    stroke: 'black', // 描边颜色 黑色
    strokeWidth: 10 // 描边粗细 10px
  })
  canvas.add(path)
}

onMounted(() => {
  init()
})
</script>

使用 new fabric.Path 创建路径。

• M：可以理解为新的起始点x，y坐标
• L：每个折点的x，y坐标
• z：自动闭合（自动把结束点和起始点连接起来）

本作品采用《CC 协议》，转载必须注明作者和本文链接