跳到主要内容

滤镜

自有方法​

Blur(imageData)​

Blur 滤镜

参数：

  • imageData（Object）

示例：

node.cache();
node.filters([Konva.Filters.Blur]);
node.blurRadius(10);

Brighten(imageData)​

Brighten 滤镜。

参数：

  • imageData（Object）

示例：

node.cache();
node.filters([Konva.Filters.Brighten]);
node.brightness(0.8);

Brightness(imageData)​

Brightness 滤镜。使用乘法方式的 CSS 兼容亮度滤镜。

参数：

  • imageData（Object）

示例：

node.cache();
node.filters([Konva.Filters.Brightness]);
node.brightness(1.5); // 亮度提高 50%（CSS 兼容）

Contrast(imageData)​

Contrast 滤镜。

参数：

  • imageData（Object）

示例：

node.cache();
node.filters([Konva.Filters.Contrast]);
node.contrast(10);

Emboss(imageData)​

Emboss 滤镜。

参数：

  • imageData（Object）

示例：

node.cache();
node.filters([Konva.Filters.Emboss]);
node.embossStrength(0.8);
node.embossWhiteLevel(0.3);
node.embossDirection('right');
node.embossBlend(true);

Enhance(imageData)​

Enhance 滤镜。调整颜色，使其覆盖尽可能宽的范围（即 0-255）。执行 wh 次像素读取和 wh 次像素写入。

参数：

  • imageData（Object）

示例：

node.cache();
node.filters([Konva.Filters.Enhance]);
node.enhance(0.4);

Grayscale(imageData)​

Grayscale 滤镜

参数：

  • imageData（Object）

示例：

node.cache();
node.filters([Konva.Filters.Grayscale]);

HSL(imageData)​

HSL 滤镜。调整色相、饱和度和亮度（或明度）

参数：

  • imageData（Object）

示例：

image.filters([Konva.Filters.HSL]);
image.luminance(0.2);

HSV(imageData)​

HSV 滤镜。调整色相、饱和度和值

参数：

  • imageData（Object）

示例：

image.filters([Konva.Filters.HSV]);
image.value(200);

Invert(imageData)​

Invert 滤镜

参数：

  • imageData（Object）

示例：

node.cache();
node.filters([Konva.Filters.Invert]);

Mask(imageData)​

Mask 滤镜

参数：

  • imageData（Object）

示例：

node.cache();
node.filters([Konva.Filters.Mask]);
node.threshold(200);

Noise(imageData)​

Noise 滤镜。随机向颜色通道添加或减去值

参数：

  • imageData（Object）

示例：

node.cache();
node.filters([Konva.Filters.Noise]);
node.noise(0.8);

Pixelate(imageData)​

Pixelate 滤镜。对像素组进行平均处理，并将其重新绘制为更大的像素

参数：

  • imageData（Object）

示例：

node.cache();
node.filters([Konva.Filters.Pixelate]);
node.pixelSize(10);

Posterize(imageData)​

Posterize 滤镜。调整通道，使该通道的不同值不超过 n 个。此操作也会应用于 alpha 通道。

参数：

  • imageData（Object）

示例：

node.cache();
node.filters([Konva.Filters.Posterize]);
node.levels(0.8); // 介于 0 和 1 之间

RGB(imageData)​

RGB 滤镜

参数：

  • imageData（Object）

示例：

node.cache();
node.filters([Konva.Filters.RGB]);
node.blue(120);
node.green(200);

RGBA(imageData)​

RGBA 滤镜

参数：

  • imageData（Object）

示例：

node.cache();
node.filters([Konva.Filters.RGBA]);
node.blue(120);
node.green(200);
node.alpha(0.3);

Sepia(imageData)​

参数：

  • imageData（Object）

示例：

node.cache();
node.filters([Konva.Filters.Sepia]);

Solarize(imageData)​

Solarize 滤镜

参数：

  • imageData（Object）

示例：

node.cache();
node.filters([Konva.Filters.Solarize]);

Threshold(imageData)​

Threshold 滤镜。将任何高于中点的值推至最大值，将任何低于中点的值推至最小值。此操作会影响 alpha 通道。

参数：

  • imageData（Object）

示例：

node.cache();
node.filters([Konva.Filters.Threshold]);
node.threshold(0.1);