How to apply KineticJS filter ?

问题

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

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 ?

Thank you !

回答1:

Realy, documentation for filters is poor.

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
    });

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(); 
      }
    });

来源：https://stackoverflow.com/questions/16473880/how-to-apply-kineticjs-filter