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 ，但要设置 rx 和 ry。

当 rx > ry ：椭圆是横着的
当 rx < ry：椭圆是竖着的
当 rx = ry：看上去就是个圆形