logoCreated with Sketch.

X6

Filter

4 min read

我们可以使用 filter 这个特殊属性来为元素指定 SVG 滤镜，像下面这样，为该元素的 filter 属性指定一个预定义的对象，其中 name 和 args 分别指定了滤镜名称和滤镜参数。

// 创建节点是通过 attrs 选项指定滤镜
const rect = graph.addNode({
  x: 40,
  y: 40,
  width: 80,
  height: 30,
  attrs: {
    body: {
      filter: {
        name: 'dropShadow',
        args: {
          dx: 2,
          dy: 2,
          blur: 3,
        },
      },
    },
  },
})

// 创建节点后可以通过 `attr()` 方法修改或指定元素滤镜
rect.attr('body/filter', {
  name: 'dropShadow',
  args: {
    dx: 2,
    dy: 2,
    blur: 3,
  },
})

另外，我们也可以调用 graph.defineFilter(...) 方法来得到一个滤镜的 ID，然后将 filter 属性指定为这个滤镜的 ID。

const filterId = graph.defineFilter({
  name: 'dropShadow',
  args: {
    dx: 2,
    dy: 2,
    blur: 3,
  },
})

rect.attr('body/filter', `#${filterId}`)

通过上面的简单介绍，我们了解了如何使用滤镜，下面我们就分别来看看在 Registry.Filter.presets 命名空间中预定义了哪些滤镜。

presets

dropShadow

阴影滤镜。参考 CSS drop-shadow() 滤镜。

参数

参数名类型默认值说明
dxnumber0阴影在 X 轴的偏移量。
dynumber0阴影在 Y 轴的偏移量。
blurnumber0阴影的模糊半径。
opacitynumber1阴影的透明度。

blur

高斯模糊滤镜。参考 CSS blur() 滤镜。

参数

参数名类型默认值说明
xnumber2X 轴方向的模糊程度。
ynumber-Y 轴方向的模糊程度，缺省时与 X 轴保持一致。

grayScale

灰阶滤镜。参考 CSS grayscale() 滤镜。

参数

参数名类型默认值说明
amountnumber1灰阶程度。取值从 [0-1]，0 表示没有灰度，1 表示全灰。

sepia

褐色滤镜。参考 CSS sepia() 滤镜。

参数

参数名类型默认值说明
amountnumber1褐色程度。取值从 [0-1]，0 表示褐色程度为 0，1 表示全褐色。

saturate

饱和度滤镜。参考 CSS saturate() 滤镜。

参数

参数名类型默认值说明
amountnumber1饱和度。取值从 [0-1]。

hueRotate

色相旋转滤镜。参考 CSS hue-rotate() 滤镜。

参数

参数名类型默认值说明
anglenumber0色相旋转角度。

invert

反色滤镜。参考 CSS invert() 滤镜。

参数

参数名类型默认值说明
amountnumber1反色度。取值从 [0-1]，0 表示没有反色，1 表示完全反色。

brightness

明亮度滤镜。参考 CSS brightness() 滤镜。

参数

参数名类型默认值说明
amountnumber1明亮度。取值从 [0-1]，0 表示全暗，1 表示全亮。

contrast

对比度滤镜。参考 CSS contrast() 滤镜。

参数

参数名类型默认值说明
amountnumber1对比度。取值从 [0-1]，0 表示全暗，1 表示全亮。

highlight

高亮滤镜。

参数

参数名类型默认值说明
colorstringred高亮颜色。
widthnumber1高亮外框的宽度。
blurnumber0模糊半径。
opacitynumber1透明度。

outline

边框滤镜。

参数

参数名类型默认值说明
colorstringblue边框颜色。
widthnumber1边框宽度。
marginnumber2边距。
opacitynumber1透明度。

registry

滤镜定义是一个具有如下签名的函数，返回 <filter> 标签字符串。

export type Definition<T> = (args: T) => string

例如，高斯模糊滤镜的定义为：

export interface BlurArgs {
  x?: number
  y?: number
}

export function blur(args: BlurArgs = {}) {
  const x = getNumber(args.x, 2)
  const stdDeviation = args.y != null && isFinite(args.y) ? [x, args.y] : x

  return `
    <filter>
      <feGaussianBlur stdDeviation="${stdDeviation}"/>
    </filter>
  `.trim()
}

同时，我们在 Registry.Filter.registry 对象上提供了 register 和 unregister 两个方法来注册和取消注册网格定义，同时也将这两个方法分别挂载为 Graph 上的两个静态方法 Graph.registerFilter 和 Graph.unregisterFilter。

register

register(entities: { [name: string]: Definition }, force?: boolean): void
register(name: string, entity: Definition, force?: boolean): Definition

注册滤镜。

我们可以调用 Graph.registerFilter(...) 方法来注册滤镜。

Graph.registerFilter('blur', blur)

unregister

unregister(name: string): Definition | null

取消注册滤镜。