Added tweening to HSV filter

src/filters/ColorPack.js

@@ -72,6 +72,70 @@
 
   Kinetic.Filters.HSV = Kinetic.Util._FilterWrapSingleBuffer(HSV);
 
+  Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'filterHue', 0);
+  Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'filterSaturation', 1);
+  Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'filterValue', 1);
+
+  Kinetic.Filters.HSV = function(src,dst,opt){
+    if( this === Kinetic.Filters ){
+      HSV(src, dst||src, opt );
+    }else{
+      HSV.call(this, src, dst||src, opt || {
+        hue: this.getFilterHue(),
+        saturation: this.getFilterSaturation(),
+        value: this.getFilterValue()
+      });
+    }
+  };
+
+    /**
+    * get filter hue.  Returns the hue shift for the HSV filter.
+    * 0 is no change, 359 is the maximum shift.
+    * @name getFilterHue
+    * @method
+    * @memberof Kinetic.Image.prototype
+    */
+
+    /**
+    * set filter hue.  Sets the hue shift for the HSV filter.
+    * 0 is no change, 359 is the maximum shift.
+    * @name setFilterHue
+    * @method
+    * @memberof Kinetic.Image.prototype
+    */
+
+    /**
+    * get filter saturation.  Returns the saturation scale for the HSV
+    * filter. 1 is no change, 0.5 halves the saturation, 2.0 doubles, etc..
+    * @name getFilterSaturation
+    * @method
+    * @memberof Kinetic.Image.prototype
+    */
+
+    /**
+    * set filter saturation.  Set the saturation scale for the HSV
+    * filter. 1 is no change, 0.5 halves the saturation, 2.0 doubles, etc..
+    * @name setFilterSaturation
+    * @method
+    * @memberof Kinetic.Image.prototype
+    */
+
+    /**
+    * get filter value.  Returns the value scale for the HSV
+    * filter. 1 is no change, 0.5 halves the value, 2.0 doubles, etc..
+    * @name getFilterValue
+    * @method
+    * @memberof Kinetic.Image.prototype
+    */
+
+    /**
+    * set filter value.  Set the value scale for the HSV
+    * filter. 1 is no change, 0.5 halves the value, 2.0 doubles, etc..
+    * @name setFilterValue
+    * @method
+    * @memberof Kinetic.Image.prototype
+    */
+
 })();
 
 (function() {

test/unit/filters/ColorPack-test.js

@@ -108,14 +108,100 @@ suite('Color Pack', function() {
             layer.add(darth);
             stage.add(layer);
 
-            darth.setFilter(Kinetic.Filters.ShiftHue);
+            darth.setFilter(Kinetic.Filters.HSV);
-            darth.setFilterHueShiftDeg(360);
+            darth.setFilterHue(360);
             layer.draw();
 
             var tween = new Kinetic.Tween({
               node: darth, 
               duration: 5.0,
-              filterHueShiftDeg: 0,
+              filterHue: 0,
+              easing: Kinetic.Easings.EaseInOut
+            });
+        
+            darth.on('mouseover', function() {
+              tween.play();
+            });
+      
+            darth.on('mouseout', function() {
+              tween.reverse();
+            });
+
+            done();
+        };
+        imageObj.src = 'assets/lion.png';
+
+    });
+
+    // ======================================================
+    test('saturation tween transparancy', function(done) {
+        var stage = addStage();
+
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            
+            var layer = new Kinetic.Layer();
+            darth = new Kinetic.Image({
+                x: 10,
+                y: 10,
+                image: imageObj,
+                draggable: true
+            });
+
+            layer.add(darth);
+            stage.add(layer);
+
+            darth.setFilter(Kinetic.Filters.HSV);
+            darth.setFilterSaturation(2.0);
+            layer.draw();
+
+            var tween = new Kinetic.Tween({
+              node: darth, 
+              duration: 5.0,
+              filterSaturation: 0.001,
+              easing: Kinetic.Easings.EaseInOut
+            });
+        
+            darth.on('mouseover', function() {
+              tween.play();
+            });
+      
+            darth.on('mouseout', function() {
+              tween.reverse();
+            });
+
+            done();
+        };
+        imageObj.src = 'assets/lion.png';
+
+    });
+
+    // ======================================================
+    test('value tween transparancy', function(done) {
+        var stage = addStage();
+
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            
+            var layer = new Kinetic.Layer();
+            darth = new Kinetic.Image({
+                x: 10,
+                y: 10,
+                image: imageObj,
+                draggable: true
+            });
+
+            layer.add(darth);
+            stage.add(layer);
+
+            darth.setFilter(Kinetic.Filters.HSV);
+            darth.setFilterValue(2.0);
+            layer.draw();
+
+            var tween = new Kinetic.Tween({
+              node: darth, 
+              duration: 5.0,
+              filterValue: 0.001,
               easing: Kinetic.Easings.EaseInOut
             });
         
@@ -279,4 +365,77 @@ suite('Color Pack', function() {
         done();
     });
 
+    // ======================================================
+    test('value gradient', function (done) {
+        var stage = addStage();
+
+        var shapesLayer = new Kinetic.Layer();
+
+        // The important line!
+        shapesLayer.on('draw', function () {
+          var src, dst, i, w=40;
+          var ctx = this.getContext();
+          var ctxWidth = this.getCanvas().width;
+          var ctxHeight = this.getCanvas().height;
+          var xSize = Math.floor(ctxWidth/w);
+          var ySize = Math.floor(ctxHeight);
+          for( i=0; i<w; i+=1 ){
+              src = ctx.getImageData(i*xSize,0,xSize,ySize);
+              dst = ctx.createImageData(src);
+              Kinetic.Filters.HSV(src,dst,{value:2*(0.001+i)/w});
+              ctx.putImageData(dst,i*xSize,0);
+              //ctx.strokeRect(i*xSize,0,xSize,ySize);
+          }
+        });
+
+        var triangle = new Kinetic.RegularPolygon({
+          x: stage.getWidth() / 4,
+          y: stage.getHeight() / 2,
+          sides: 3,
+          radius: 80,
+          fillRadialGradientStartPoint: 0,
+          fillRadialGradientStartRadius: 0,
+          fillRadialGradientEndPoint: 0,
+          fillRadialGradientEndRadius: 70,
+          fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'],
+          stroke: 'black',
+          strokeWidth: 4,
+          draggable: true
+        });
+
+        var circle = new Kinetic.Circle({
+          x: 3 * stage.getWidth() / 4,
+          y: stage.getHeight() / 2,
+          radius: 70,
+          fill: '#880000',
+          stroke: 'black',
+          strokeWidth: 4,
+          draggable: true,
+          id: 'myCircle'
+        });
+
+        for( var i=0; i<10; i+=1 ){
+          for( var j=0; j<10; j+=1 ){
+            var rect = new Kinetic.Rect({
+              x: i/10*stage.getWidth(),
+              y: j/10*stage.getHeight(),
+              width: stage.getWidth()/10,
+              height: stage.getHeight()/10,
+              fill: (i+j)%2===0?'#FF0000':'#FFFF00',
+              stroke: 'black',
+              strokeWidth: 4,
+              draggable: true
+            });
+            shapesLayer.add(rect);
+          }
+        }
+
+        shapesLayer.add(circle);
+        shapesLayer.add(triangle);
+
+        stage.add(shapesLayer);
+
+        done();
+    });
+
 });