Filters

Currently only custom filters are supported. Official standard filters will be added in the future.

Install Plugin

You need to install the filter plugin to use this feature. Visit GitHub repository.

npm

npm install @leafer-in/filter

pnpm

pnpm add @leafer-in/filter

yarn

yarn add @leafer-in/filter

bun

bun add @leafer-in/filter

Or include via script tag and access plugin APIs through the global variable LeaferIN.filter.

filter.min

<script src="https://unpkg.com/@leafer-in/filter@2.3.1/dist/filter.min.js"></script>

filter

<script src="https://unpkg.com/@leafer-in/filter@2.3.1/dist/filter.js"></script>

Custom Filter

// #自定义滤镜 [blur 滤镜]
import { Leafer, Rect, Filter } from 'leafer-ui'
import '@leafer-in/filter'  // 导入滤镜插件

// 注册自定义滤镜
Filter.register('blur', {
    apply(filter, _ui, worldBounds, currentCanvas, _orginCanvas, _shape) { // 应用自定义滤镜
        currentCanvas.filter = `blur(${filter.blur}px)`
        currentCanvas.resetTransform()
        // currentCanvas.clipWorld(worldBounds) // 某些svg滤镜需要裁剪区域再应用，否则会污染画布
        currentCanvas.copyWorld(currentCanvas, worldBounds, worldBounds, "copy")
        currentCanvas.filter = 'none'
    },
    getSpread(filter) { // 扩展元素的渲染边界
        return filter.blur
    }
})

// 使用滤镜
const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    cornerRadius: 30,
    fill: 'rgba(50,205,121,0.7)',
    draggable: true,
    filter: { // 支持多个滤镜 [filter, filter]
        type: 'blur',  // 对应注册的滤镜名称
        blur: 20
    }
})

leafer.add(rect)

Coming Soon

A detailed guide and documentation for custom filters is under development...