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 line = new fabric.Line(
 [
 10, 10, // 起始点坐标
 200, 300 // 结束点坐标
 ],
 {
 stroke: 'red', // 笔触颜色
 }
 )
 canvas.add(line)
}

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

使用 new fabric.Line 创建线段。

new fabric.Line 需要传入2个参数。

  • 第一个参数是 数组 ,数组需要传4个值,前2个值是起始坐标的x和y,后2个值是结束坐标的x和y

  • 第二个参数是 线段的样式,要设置线段的颜色,需要使用 stroke

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

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