如何应用KineticJS过滤器? [英] How to apply KineticJS filter ?

问题描述

我发现KineticJS过滤器文档非常令人沮丧，并且无法在线找到示例，尤其是考虑到亮度.

I find the KineticJS filters documentation extremely frustrating and could not find examples online, especially considering brightness.

dynamic.filters文档链接提到Kinetic.Filters.Brighten( imageData)，但没有有关如何向其传递参数或如何使用它的信息.

The kinetic.filters docs link mention a Kinetic.Filters.Brighten(imageData) but there's no info on how to pass parameters to it or how to use it.

我需要的是一个在舞台上的图层上的图像的工作示例，以及两个按钮-一个使图像更亮，一个使图像更暗.有人可以帮我吗?

All I need is a working example of an image on a layer on a stage, and two buttons - one to make the image brighter and one to make it darker. Can anyone please help me with that ?

谢谢！

推荐答案

确实，有关过滤器的文档很差.

Realy, documentation for filters is poor.

增亮滤镜示例:(kineticjs 4.5.0)

Example for Brighten filter: (kineticjs 4.5.0)

    darth = new Kinetic.Image({
      x: 10,
      y: 10,
      image: imageObj,
      draggable: true,
      filter: Kinetic.Filters.Brighten,
      filterBrightness: -50
    });

要制作动画，您可以使用本教程: http ://www.html5canvastutorials.com/kineticjs/html5-canvas-tween-blur-filter-with-kineticjs/

for animate you can use this tutorial: http://www.html5canvastutorials.com/kineticjs/html5-canvas-tween-blur-filter-with-kineticjs/

    var tween = TweenLite.to(darth, 0.6, {
      paused: true,
      setFilterBrightness: 50,
      onUpdate: function() {
        layer.batchDraw(); 
      }
    });

这篇关于如何应用KineticJS过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！