Ellipse 元素

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

继承

Ellipse  >  UI

关键属性

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

示例

绘制圆

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

// #创建 Ellipse [绘制圆]
import { Leafer, Ellipse } from 'leafer-ui'

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

const ellipse = new Ellipse({
    width: 100,
    height: 100,
    fill: "#32cd79"
})

leafer.add(ellipse)

绘制圆环

// #创建 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: "#32cd79"
})

leafer.add(ellipse)

绘制扇形圆环

// #创建 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: "#32cd79"
})

leafer.add(ellipse)

绘制扇形

// #创建 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: "#32cd79"
})

leafer.add(ellipse)

绘制圆角弧线

// #创建 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: "#32cd79",
    strokeWidth: 10,
    strokeAlign: 'center',
    strokeCap: 'round'
})

leafer.add(ellipse)

绘制椭圆

// #创建 Ellipse [绘制椭圆]
import { Leafer, Ellipse } from 'leafer-ui'

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

const ellipse = new Ellipse({
    width: 50,
    height: 100,
    fill: "#32cd79"
})

leafer.add(ellipse)