CODEWITHSUNDEEP
javascriptkineticjs
JSArrakis
JSArrakis

Reputation: 799

Kinetic color fill tween not working

Im trying to change the color of the target node on mouse over and am currently using this code:

        layer.on('mouseenter', function(evt) {
            var shape = evt.targetNode;
            shape.moveTo(secondLayer);
            stage.draw()
            var tween = new Kinetic.Tween({
                node: shape,
                duration: 0.05,
                scaleX: 1.5,
                scaleY: 1.5,
                fillRed: 255,
                fillGreen: 102,
                fillBlue: 0,
            });
            tween.play()
        });

        secondLayer.on('mouseout', function(evt) {
            var shape = evt.targetNode;
            var tween = new Kinetic.Tween({
                node: shape,
                duration: 0.05,
                scaleX: 1,
                scaleY: 1,
                fillRed: 17,
                fillGreen: 17,
                fillBlue: 17,
                onFinish: function() {
                    shape.moveTo(layer);
                    layer.draw();
                }
            });
            tween.play();       
        });

The scale tween works fine however the color does not change at all. Not entirely sure what Im doing wrong.

Heres a jsfiddle of it:

http://jsfiddle.net/y2C3Z/5/

Upvotes: 1

Views: 132

Answers (1)

pschueller
pschueller

Reputation: 4427

The 'fill' attribute that you set for the triangle has priority over fillRed, fillGreen, and fillBlue... so you would also have to set the color with those RGB attributes when creating the triangle.

From the official change log:

the color component API has changed a lot. fillR() has changed to fillRed(), fillB() has changed to fillBlue(), etc. The same goes for stroke and shadowColor components. The RGB() methods have been removed because they have muddied up the API. i.e. fillRGB(), strokeRGB(), and shadowColorRGB() have been removed. The components are now actual attrs. the fill attr has priority over components. i.e. if you set fill to 'blue' but you set the fillRed and fillGreen values, the fill will resolve to blue.

Here is a working jsfiddle of your code using the latest version of Kinetic JS. Note that I also had to change evt.targetNode to evt.target.

Upvotes: 1

Related Questions