Polygon
绘制三角形、菱形、五边形、正多边形、自由多边形、平滑多变形。
关键属性
width: number
正多边形的宽度。
height: number
正多边形的高度。
sides: number
正多边形的边数,取值范围为 >=3。
内部逻辑:在一个圆上每 (360 / sides) 度取一个点,再将点连成线,组成一个正多边形。
ts
// 五边形
sides: 5
points 模式
可通过 points 定义自由多边形。
points: number
[] | IPointData[]
可通过坐标数组 [ x1,y1, x2,y2, ...] 绘制自由多边形(高性能)。
或通过坐标对象数组 [ {x, y}, {x, y} ...] 绘制自由多边形 (可读性高,性能一般)。
curve: boolean
| number
是否转换为平滑路径,默认为 false。
可设置 0 ~ 1 控制曲率,默认为 0.5。
路径模式
path 优先模式
圆角属性
cornerRadius: number
圆角大小,使图形拐角处变的圆滑。
继承
UI
示例
绘制三角形
ts
import { Leafer, Polygon } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const polygon = new Polygon({
width: 100,
height: 100,
sides: 3,
fill: 'rgb(50,205,121)'
})
leafer.add(polygon)
绘制五边形
ts
import { Leafer, Polygon } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const polygon = new Polygon({
width: 100,
height: 100,
sides: 5,
fill: 'rgb(50,205,121)'
})
leafer.add(polygon)
绘制圆角六边形
ts
import { Leafer, Polygon } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const polygon = new Polygon({
width: 100,
height: 100,
sides: 6,
cornerRadius: 10,
fill: 'rgb(50,205,121)'
})
leafer.add(polygon)
绘制自由多边形
ts
import { Leafer, Polygon } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const polygon = new Polygon({
points: [10, 90, 10, 10, 50, 70, 90, 10, 90, 90], // [x,y, x,y ...]
fill: 'rgb(50,205,121)'
})
leafer.add(polygon)
绘制平滑多边形
ts
import { Leafer, Polygon } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const polygon = new Polygon({
points: [10, 90, 10, 10, 50, 70, 90, 10, 90, 90, 90, 90, 10, 90], // [x,y, x,y ...]
curve: true,
fill: 'rgb(50,205,121)'
})
leafer.add(polygon)
绘制 0.2 曲率的平滑多边形
ts
import { Leafer, Polygon } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const polygon = new Polygon({
points: [10, 90, 10, 10, 50, 70, 90, 10, 90, 90, 90, 90, 10, 90], // [x,y, x,y ...]
curve: 0.2,
fill: 'rgb(50,205,121)'
})
leafer.add(polygon)
绘制趋势图
ts
import { Leafer, Polygon } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const polygon = new Polygon({
points: [0, 90, 20, 60, 40, 80, 60, 40, 75, 50, 90, 10, 100, 90, 100, 90, 0, 90],
curve: true,
fill: 'rgb(50,205,121)'
})
leafer.add(polygon)