Polygon
绘制三角形、菱形、五边形、正多边形、自由多边形、平滑多变形。
关键属性
width: number
正多边形的宽度。
height: number
正多边形的高度。
sides: number
正多边形的边数，取值范围为 >=3。
内部逻辑：在一个圆上每 (360 / sides) 度取一个点，再将点连成线，组成一个正多边形。
ts
// 五边形
sides: 5points 模式
可通过 points 定义自由多边形。
points: number[]
通过坐标组 [ x1,y1, x2,y2, ...] 绘制自由多边形。
curve: boolean | number
是否转换为平滑路径，默认为 false。
可设置 0 ～ 1 控制曲率，默认为 0.5。
路径模式
path 优先模式
圆角属性
cornerRadius: number
圆角大小，使图形拐角处变的圆滑。
继承
UI
API
Polygon
示例
绘制三角形
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)'
})
绘制平滑多边形
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)'
})
绘制 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)'
})
绘制趋势图
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)'
})