kinectjs动态颜色

时间:2014-04-19 11:45:39

标签: javascript kineticjs

有没有办法在Kinecticjs中动态更改补间目标颜色?

我已经开始使用矩形和目标颜色的补间,但我希望能够动态更改目标颜色。例如,我尝试访问Tween fillBlue属性,但它没有任何效果。此功能似乎适用于以前的KinectJS库,但不适用于5.0。 JsFiddle:http://jsfiddle.net/cmh600/7HT46/

由于

  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });
  var layer = new Kinetic.Layer();
  var rect = new Kinetic.Rect({
    x: 20,
    y: 20,
    width: 100,
    height: 50,
    fillRed: 0,
    fillGreen: 128,
    fillBlue: 0,
    stroke: 'black',
    strokeWidth: 2,
  });

  layer.add(rect);
  stage.add(layer);

    var tween = new Kinetic.Tween({
            node: rect, 
            duration: 2,
            opacity: 1,
            easing: Kinetic.Easings.Linear,
            fillRed: 0,
            fillGreen: 0,
            fillBlue: 255
          }); 

    rect.on("mouseover", function() {
        tween.fillBlue = 0;
        tween.play();
    });

1 个答案:

答案 0 :(得分:1)

这样的事情正在发挥作用:

rect.on("mouseover", function() {
    tween._addAttr("fillBlue", 0);
    tween._addAttr("fillRed", 255);
    tween.play();
});