Skip to content

Ellipse

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

关键属性

width: number

X 轴直径。

height: number

Y 轴直径。

ts
// 圆
width: 100
height: 100

// 椭圆
width: 50
height: 100

startAngle: number

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

endAngle: number

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

innerRadius: number

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

ts
// 扇形
startAngle: -60
endAngle: 180

// 圆环
innerRadius: 0.5

继承

UI

API

Ellipse

示例

绘制圆

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

ts
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)

绘制圆环

ts
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)

绘制扇形圆环

ts
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)

绘制扇形

ts
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)

绘制弧线

ts
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)"
})

leafer.add(ellipse)

绘制椭圆

ts
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)

Released under the MIT License.