扩展 KineticJS - 自定义过滤器

Posted 2023-03-05

【中文标题】扩展 KineticJS - 自定义过滤器

【英文标题】：extending KineticJS - custom filter

【发布时间】：2014-03-09 01:46:54

【问题描述】：

我正在尝试向 KineticJS 添加对比度作为过滤器（我知道，从技术上讲，它不是过滤器）。它可以工作，但我也想添加contrast() 修饰符（比如noise() 用于噪声过滤器等）。

这是我的函数（包括 KineticJS 5.0.1 库之后）：

(function() 

    Kinetic.Filters.Contrast = function(imageData) 
        var data = imageData.data,
            len = data.length,
            i,
            adjust = this.contrast(),
            x = [];

            //[cut] processing, not important here
    ;

    Kinetic.Factory.addGetterSetter(Kinetic.Node, 'contrast', 0, null, Kinetic.Factory.afterSetFilter);
)();

如您所见，Kinetic.Factory.addGetterSetter 应该为我提供 contrast() 修饰符，但它没有。当我运行代码时，结果是TypeError: imgs.contrast is not a function:

imgs.filters([Kinetic.Filters.Contrast]);
imgs.contrast(30);

我做错了什么？

//更新 我的临时解决方案：只需将我的函数放入 kineticJS 文件中。不完美，但它有效。

【参考方案1】：

从我从documentation 中可以看出，您所拥有的应该可以工作。但是，当我自己尝试时，我最终遇到了同样的错误。借鉴这个*** answer，看起来另一种方法是通过动力学图像的配置对象设置过滤器：

    var myImg = new Kinetic.Image(
      image: imageObj,
      filter: Kinetic.Filters.Contrast
    );

Fiddle here（错误与尝试将过滤器应用于来自另一个域的图像有关，我认为可以打折）。

【讨论】：

从技术上讲，您的解决方案还可以，但我的画布上有很多动态添加的对象。所以它很难实现，我认为在我的情况下性能还不够好（但我没有做任何测试）。我的临时解决方案：只需将函数放入 kineticJS 文件中。不完美，但它有效。