fill

填充，类似于 HTML5 中的 background-color，或文字的 color。

关键属性

fill: string | Paint ｜ Paint[]

填充背景或文字。

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

归属

UI 元素

示例

纯色填充

Leafer

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

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

const rect = new Rect({
    width: 100,
    height: 100,
    fill: {
        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,
    fill: {
        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,
    fill: {
        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,
    fill: {
        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,
    fill: {
        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,
    fill: {
        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,
    fill: [ 
        {
            type: 'linear', // 线性渐变填充
            stops: [{ offset: 0, color: '#FF4B4B' }, { offset: 1, color: '#FEB027' }]
        },
        {
            type: 'image', // 图案填充
            url: '/image/leafer.jpg',
            mode: 'cover',
            opacity: 0.2
        }]
})

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,
    fill: [ 
        {
            type: 'linear', // 线性渐变填充
            stops: [{ offset: 0, color: '#FF4B4B' }, { offset: 1, color: '#FEB027' }]
        },
        {
            type: 'image', // 图案填充
            url: '/image/leafer.jpg',
            mode: 'cover',
            opacity: 0.2
        }]
})

app.tree.add(rect)