Ellipse
绘制圆、圆环、扇形圆环、扇形、弧线、椭圆，想从中心点绘制，可以了解 around。
关键属性
width: number
X 轴直径。
height: number
Y 轴直径。
ts
// 圆
width: 100
height: 100
// 椭圆
width: 50
height: 100startAngle: 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)"
})
绘制圆环
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)",
strokeWidth: 10,
strokeAlign: 'center',
strokeCap: 'round'
})
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)