javascript - 动态颜色填充补间不起作用

Question

我正在尝试更改鼠标悬停时目标节点的颜色，并且当前正在使用以下代码:

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

补间比例工作正常，但颜色根本没有改变。不完全确定我做错了什么。

这是它的一个jsfiddle:

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

Answer 1

您为三 Angular 形设置的“填充”属性优先于 fillRed、fillGreen 和 fillBlue...因此您在创建三 Angular 形时还必须使用这些 RGB 属性设置颜色。

来自官方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是使用最新版本的 Kinetic JS 代码的工作 jsfiddle。请注意，我还必须将 evt.targetNode 更改为 evt.target。