我试图在KineticJS中为矩形设置三态鼠标悬停。 矩形以白色开头,然后将鼠标悬停在矩形上,将颜色更改为红色,然后启动补间,并在1秒钟内补间为白色。 另一个鼠标悬停将重复该过程,我可以使用版本4库而不是版本5来使它运行。JsFiddle: http : //jsfiddle.net/cmh600/uFFN9/12/

任何帮助,不胜感激

  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: 255,
    fillGreen: 255,
    fillBlue: 255,
    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: 255,
            fillGreen: 255,
            fillBlue: 255
          }); 

    rect.on("mouseover", function() {
        rect._setAttr('fillRed',255);
        rect._setAttr('fillGreen',0);
        rect._setAttr('fillBlue',0);
        rect.draw();
      tween.play();
    });

===============>>#1 票数:0 已采纳

设置rect的新填充颜色后,必须声明补间,否则起始值将是错误的(它将立即转换为白色)。 使用KJ5:

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

  ask by user3551527 translate from so

未解决问题?本站智能推荐: