Skip to content

stroke

描边。

关键属性

stroke: string | PaintPaint[]

填充颜色、图像,用于描边。

支持纯色线性渐变径向渐变角度渐变图案填充 等类型, 支持多个填充同时叠加。

描边方式

UI 和闭合类图形 默认为 内描边,Path / Line 默认为 居中描边, Text 默认为 外描边。

描边样式属性

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)

Released under the MIT License.