Ellipse

绘制圆、圆环、扇形圆环、扇形、弧线、椭圆，想从中心点绘制，可以了解 around。

关键属性

width: number

X 轴直径。

height: number

Y 轴直径。

// 圆
width: 100
height: 100

// 椭圆
width: 50
height: 100

startAngle: number

弧形的起始角度, 取值范围为 -180 ～ 180。

endAngle: number

弧形的结束角度, 取值范围为 -180 ～ 180。

innerRadius: number

内半径比例, 取值范围为 0.0 ～ 1.0。

// 扇形
startAngle: -60
endAngle: 180

// 圆环
innerRadius: 0.5

继承元素

UI

示例

绘制圆

圆心位于 width / 2, height / 2 处。

import { Leafer, Ellipse } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const ellipse = new Ellipse({
    width: 100,
    height: 100,
    fill: "rgb(50,205,121)"
})

leafer.add(ellipse)

绘制圆环

import { Leafer, Ellipse } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const ellipse = new Ellipse({
    width: 100,
    height: 100,
    innerRadius: 0.5,
    fill: "rgb(50,205,121)"
})

leafer.add(ellipse)

绘制扇形圆环

import { Leafer, Ellipse } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const ellipse = new Ellipse({
    width: 100,
    height: 100,
    startAngle: -60,
    endAngle: 180,
    innerRadius: 0.5,
    fill: "rgb(50,205,121)"
})

leafer.add(ellipse)

绘制扇形

import { Leafer, Ellipse } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const ellipse = new Ellipse({
    width: 100,
    height: 100,
    startAngle: -60,
    endAngle: 180,
    fill: "rgb(50,205,121)"
})

leafer.add(ellipse)

绘制圆角弧线

import { Leafer, Ellipse } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const ellipse = new Ellipse({
    width: 100,
    height: 100,
    startAngle: -60,
    endAngle: 180,
    innerRadius: 1,
    stroke: "rgb(50,205,121)",
    strokeWidth: 10,
    strokeAlign: 'center',
    strokeCap: 'round'
})

leafer.add(ellipse)

绘制椭圆

import { Leafer, Ellipse } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const ellipse = new Ellipse({
    width: 50,
    height: 100,
    fill: "rgb(50,205,121)"
})

leafer.add(ellipse)