Ellipse
绘制圆、圆环、圆环扇形、扇形、弧线、椭圆。
关键属性
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示例
绘制圆
圆心位于 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: 180,
endAngle: -60,
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)