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

缩放补间效果很好但颜色根本没有变化。不完全确定我做错了什么。

这是一个小问题：

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

Answer 1

您为三角形设置的'fill'属性优先于fillRed，fillGreen和fillBlue ...因此您还必须在创建三角形时使用这些RGB属性设置颜色。

来自官方change log：

颜色组件API发生了很大变化。 fillR（）已更改为 fillRed（），fillB（）已更改为fillBlue（）等。同样适用 stroke和shadowColor组件。 RGB（）方法已被删除因为他们混淆了API。即fillRGB（），strokeRGB（）和 shadowColorRGB（）已被删除。这些组件现在是实际的 ATTRS。 fill attr优先于组件。即如果你设定填充为“蓝色”但您设置了fillRed和fillGreen值，即填充将解决蓝色。

Here是使用最新版Kinetic JS的代码的工作方式。请注意，我还必须将evt.targetNode更改为evt.target。

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

1 个答案: