stroke

描边，类似于 HTML5 中的 border-color。

关键属性

stroke: string | Paint ｜ Paint[]

描边。

支持 纯色、 线性渐变、径向渐变、角度渐变、图案 等类型， 支持多个描边同时叠加。

描边方式

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

描边样式属性

strokeAlign?: StrokeAlign

描边的对齐方式，UI 和闭合类图形 默认为 inside，Path / Line 默认为 center, Text 默认为 outside。

type StrokeAlign = 'inside' | 'center' | 'outside' //  内部  |  居中 ｜ 外部

strokeWidth?: number

描边的宽度, 默认为 1。

strokeScaleFixed?: 'zoom-in' | number | boolean

strokeWidthFixed?: 'zoom-in' | false

固定描边线宽的全局缩放，默认为 false。

设为 true 时，表示线宽不会跟随画面缩放，线宽比较大时请谨慎使用（可能会带来残影）。

设置 'zoom-in' 或 数字 1 时， 表示线宽不会跟随画面放大，但会跟随缩小（防止堆成一团）。

设置 0～1 之间的小数时，表示在画面缩小到这个缩放值的时候，线宽才开始变小。

在此场景下，建议 strokeAlign 使用高性能的居中描边， 另 hitFill 为 all 可节省填充操作。

strokeCap?: StrokeCap

描边的端点形状，默认为 none。

type StrokeCap = 'none' | 'round' | 'square' // 无 | 圆形 | 方形

strokeJoin?: StrokeJoin

描边的拐角处理，默认为 miter 。

type StrokeJoin =  'miter' ｜ 'bevel' | 'round' //  直角 ｜ 平角 ｜ 圆角

dashPattern?: number[]

虚线描边的数值。

rect.dashPattern = [20, 10] // [线段，间隙]

dashOffset: number

虚线描边的起点偏移值。

子描边属性

当为元素设置多个描边时，可设置子描边样式 style ，用于覆盖 主描边样式。

可形成蚂蚁线、模拟内中外三层描边等各种效果。

纯色、 线性渐变、径向渐变、角度渐变、图案 等类型均支持子描边样式。

interface IStrokeStyle {
    strokeWidth?: number // 描边的宽度
    strokeScaleFixed?: false // 是否取消固定线宽功能
    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 元素

示例

纯色描边

Leafer

// #纯色描边 (Leafer)
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    stroke: {
        type: 'solid',
        color: '#32cd79'
    }
})

leafer.add(rect)

App

// #纯色描边 (App)
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({ view: window, editor: {} })

const rect = new Rect({
    width: 100,
    height: 100,
    stroke: {
        type: 'solid',
        color: '#32cd79'
    }
})

app.tree.add(rect)

渐变描边

支持 线性渐变、径向渐变、角度渐变 等类型。

Leafer

// #线性渐变描边 [默认方向 (Leafer)]
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    stroke: {
        type: 'linear',  // 从顶部居中 -> 底部居中垂直绘制的渐变
        stops: ['#FF4B4B', '#FEB027']
    },
})

leafer.add(rect)

App

// #线性渐变描边 [默认方向 (App)]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({ view: window, editor: {} })

const rect = new Rect({
    width: 100,
    height: 100,
    stroke: {
        type: 'linear',  // 从顶部居中 -> 底部居中垂直绘制的渐变
        stops: ['#FF4B4B', '#FEB027']
    },
})

app.tree.add(rect)

图案描边

图案描边 支持 覆盖、适应、裁剪、平铺等模式。

Leafer

// #图案描边 [默认 cover 覆盖模式 (Leafer)]
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' // 默认模式，相当于 CSS 的 background-size: cover
    }
})

leafer.add(rect)

App

// #图案描边 [默认 cover 覆盖模式 (App)]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({ view: window, editor: {} })

const rect = new Rect({
    width: 100,
    height: 100,
    stroke: {
        type: 'image',
        url: '/image/leafer.jpg',
        // mode: 'cover' // 默认模式，相当于 CSS 的 background-size: cover
    }
})

app.tree.add(rect)

多个描边叠加

描边的 opacity 暂时仅针对 颜色对象 和图片有效。

Leafer

// #多个不同类型的描边叠加 [线性渐变描边 + 图案描边 (Leafer)]
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)

App

// #多个不同类型的描边叠加 [线性渐变描边 + 图案描边 (App)]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({ view: window, editor: {} })

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
        }]
})

app.tree.add(rect)

绘制虚线

Leafer

// #虚线描边 (Leafer)
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)

App

// #虚线描边 (App)
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({ view: window, editor: {} })

const rect = new Rect({
    width: 100,
    height: 100,
    stroke: '#32cd79',
    strokeWidth: 2,
    dashPattern: [6, 6] 
})

app.tree.add(rect)