stroke
描边，类似于 HTML5 中的 border。
关键属性
stroke: string | Paint ｜ Paint[]
填充颜色、图像，用于描边。
支持纯色、 线性渐变、径向渐变、角度渐变、图案填充 等类型， 支持多个填充同时叠加。
描边样式属性
strokeAlign?: StrokeAlign
描边的对齐方式，UI 和闭合类图形 默认为 inside，Path / Line 默认为 center, Text 默认为 outside。
tsx
type StrokeAlign = 'inside' | 'center' | 'outside' // 内部 | 居中 ｜ 外部strokeWidth?: number
描边的宽度, 默认为 1。
strokeWidthFixed?: boolean
是否固定线宽，默认为 false。
固定线宽后，当画面放大时，线宽不会跟随放大，画面缩小时仍会跟随缩小（防止堆成一团）。
在此场景下，建议 strokeAlign 使用高性能的居中描边， 另 hitFill 为 all 可节省填充操作。
strokeCap?: StrokeCap
描边的端点形状，默认为 none。
ts
type StrokeCap =
| 'none' // 无
| 'round' // 圆形
| 'square' // 方形strokeJoin?: StrokeJoin
描边的拐角处理，默认为 miter 。
ts
type StrokeJoin = 'miter' ｜ 'bevel' | 'round' // 直角 ｜ 平角 ｜ 圆角dashPattern?: number[]
虚线描边的数值。
ts
rect.dashPattern = [20, 10] // [线段，间隙]dashOffset: number
虚线描边的起点偏移值。
归属
UI
示例
纯色填充
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = new Rect({
width: 100,
height: 100,
stroke: '#32cd79',
})
leafer.add(rect)渐变填充
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = new Rect({
width: 100,
height: 100,
stroke: {
type: 'linear',
stops: [{ offset: 0, color: '#FF4B4B' }, { offset: 1, color: '#FEB027' }]
},
})
leafer.add(rect)图案填充
图案填充 支持 覆盖、适应、裁剪、平铺等模式。
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = new Rect({
width: 100,
height: 100,
stroke: {
type: 'image',
url: '/image/leafer.jpg',
mode: 'cover',
}
})
leafer.add(rect)多个填充叠加
填充的 opacity 暂时仅针对 颜色对象 和图片有效。
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = new Rect({
width: 100,
height: 100,
stroke: [
{
type: 'linear',
stops: [{ offset: 0, color: '#FF4B4B' }, { offset: 1, color: '#FEB027' }]
},
{
type: 'image',
url: '/image/leafer.jpg',
mode: 'cover',
opacity: 0.5
}]
})
leafer.add(rect)绘制虚线
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = new Rect({
width: 100,
height: 100,
stroke: '#32cd79',
strokeWidth: 2,
dashPattern: [6, 6]
})
leafer.add(rect)