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

 const polygon = new fabric.Polygon([
 {x: 30, y: 30},
 {x: 150, y: 140},
 {x: 240, y: 150},
 {x: 100, y: 30}
 ], {
 fill: '#ffd3b6', // 填充色
 stroke: '#6639a6', // 线段颜色:紫色
 strokeWidth: 5 // 线段粗细 5
 })
 canvas.add(polygon)
}

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

使用 new fabric.Polygon 绘制多边形,用法和 new fabric.Polyline 差不多,但最大的不同点是 new fabric.Polygon 会自动把 起始点结束点 连接起来。

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

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