Fabric.js 椭圆形

椭圆形

F2E 前端

<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 ellipse = new fabric.Ellipse({
 top: 20,
 left: 20,
 rx: 70,
 ry: 30,
 fill: 'hotpink'
 })
 canvas.add(ellipse)
}onMounted(() => {
 init()
})
</script>

需要使用 new fabric.Ellipse 创建 椭圆

和圆形不同,椭圆不需要设置 radius ,但要设置 rxry

  • rx > ry :椭圆是横着的

  • rx < ry:椭圆是竖着的

  • rx = ry: 看上去就是个圆形

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

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