stroke
描边，类似于 HTML5 中的 border-color。
关键属性
stroke: string | Paint ｜ Paint[]
描边。
支持 纯色、 线性渐变、径向渐变、角度渐变、图案 等类型， 支持多个描边同时叠加。
描边样式属性
strokeAlign?: StrokeAlign
描边的对齐方式，UI 和闭合类图形 默认为 inside，Path / Line 默认为 center, Text 默认为 outside。
tsx
type StrokeAlign = 'inside' | 'center' | 'outside' // 内部 | 居中 ｜ 外部strokeWidth?: number
描边的宽度, 默认为 1。
strokeWidthFixed?: 'zoom-in' | false
是否固定线宽，默认为 false。
设置 'zoom-in' 后， 线宽不会跟随画面放大，画面缩小时仍会跟随缩小（防止堆成一团）。
在此场景下，建议 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
虚线描边的起点偏移值。
子描边属性
当为元素设置多个描边时，可设置子描边样式 style ，用于覆盖 主描边样式。
可形成蚂蚁线、模拟内中外三层描边等各种效果。
纯色、 线性渐变、径向渐变、角度渐变、图案 等类型均支持子描边样式。
ts
interface IStrokeStyle { strokeWidth?: number // 描边的宽度 strokeWidthFixed?: boolean // 是否固定线宽，不随画布视图放大 strokeCap?: 'none' | 'round' | 'square' // 无 | 圆形 | 方形 (描边的端点形状) strokeJoin?: 'miter' ｜ 'bevel' | 'round' // 直角 ｜ 平角 ｜ 圆角 (描边的拐角处理) dashPattern?: number[] // 虚线描边的数值 dashOffset?: number // 虚线描边的起点偏移值 } // 蚂蚁线效果 rect.stroke = [ {type: 'solid', color: 'white'}, {type: 'solid', color: 'black', style: { dashPattern: [3, 3] }} // 第二个描边为虚线 ] // 模拟内中外三层描边效果 rect.stroke = [ {type: 'solid', color: 'blue', style: { strokeWidth: 10 }}, {type: 'solid', color: 'black', style: { strokeWidth: 5 }}, {type: 'solid', color: 'white'}, // 多个描边宽度 ]归属
UI 元素
示例
纯色描边
ts
渐变描边
ts
图案描边
图案描边 支持 覆盖、适应、裁剪、平铺等模式。
ts
多个描边叠加
描边的 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)