javascript - KineticJS 对图像应用多个滤镜，我还看到了一个色调滤镜

Question

由于在kineticJS中过滤器的记录很少，所以我在将两个过滤器应用于图像时遇到问题。有几个问题:

1)我想将模糊和增亮滤镜设置为同一图像。

两者分别工作:

if (!!image.getAttr('filterBrightness')) {
   image.setFilter(Kinetic.Filters.Brighten);
}
image.setFilterBrightness(120);

和

if (!!image.getAttr('filterAmount')){
   image.setFilter(Kinetic.Filters.Blur);
}
image.setFilterRadius(2);

我试过了

image.applyFilter(Kinetic.Filters.Blur)
image.setFilterAmount(2); 

它起作用了，但是当重新应用另一个过滤器时，模糊过滤器又关闭了。

2)如何正确检查是否有过滤器设置？我尝试了 getFilter() 函数，但 firebug 的 console.log 只显示“函数”。

3)有一些 ShiftHue 过滤器，但显然我不明白源代码中的一个词。请参阅:http://kineticjs.com/docs/Kinetic.Filters.html来源( http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.js )如下所示。我不明白的是“设置色调偏移量@name setFilterBrightness”是源文档中的错误吗？

如何使用该过滤器？设置过滤器

  /**
     * get hue shift amount.  The shift amount is a number between 0 and 360.
     * @name getFilterBrightness
     * @method
     * @memberof Kinetic.Image.prototype
     */

    /**
     * set hue shift amount
     * @name setFilterBrightness
     * @method
     * @memberof Kinetic.Image.prototype
     */

谢谢!

Answer 1

<强>1。此时，我相信您一次只能应用 1 个过滤器。

但是您可以使用myImage.setFilter更改为不同类型的过滤器

我刚刚查看了 Kinetic 的图像源代码:

https://github.com/ericdrowell/KineticJS/blob/master/src/shapes/Image.js

第 114 行定义了图像的 applyFilter 方法。

该方法不会迭代一系列过滤器，只是一个filter.call。

所以目前没有多个过滤器。

我还在问题部分看到了对多个过滤器的请求，这些过滤器被归类为“增强”(意味着尚不可用)。

https://github.com/ericdrowell/KineticJS/issues/548

目前，如果您想要多个过滤器，则必须向项目中添加图像处理插件。

<强>2。检查过滤器是否已设置

在内部，image.clearFilter 的工作原理如下:

    clearFilter: function() {
        this.filterCanvas = null;
        this._applyFilter = false;
    }

所以你应该能够检查filterCanvas是否为null或_applyFilter==false;

<强>3。改变色调

colorPack.js 中有一个 pixelShiftHue 方法:

• 将像素颜色转换为 HSL，
• 将色调移动指定的程度
• 将颜色转换回 RGB
• 返回转换后颜色的 R、G、B 值

该方法在增亮过滤器中使用，但它没有作为自己的过滤器实现。

当然，您可以使用代码自己进行色调转换。

https://github.com/ericdrowell/KineticJS/blob/355c80088f396e21f412eb743620f3c70ff39023/src/filters/ColorPack.js