javascript - 无法读取未定义的kineticjs的属性 'rotation'

Question

过去一个小时我一直盯着这个，但无法弄清楚。

我正在尝试使用 KineticJS 在单击形状时将其旋转 45 度。我发现http://jsfiddle.net/JUu2Q/6/来自 Stack Overflow 上的上一个问题，它基本上满足了我的要求。当我将其应用于我的代码(并将“层”更改为“舞台”)时，出现以下错误:无法读取未定义的属性“旋转”:

layer.on('click tap', function(evt) {
          evt.targetNode.tween = new Kinetic.Tween({
              node: evt.targetNode,
              duration: 0.3,
              rotationDeg: evt.targetNode.rotation()+45,
              easing: Kinetic.Easings.EaseOut
          });
          evt.targetNode.tween.play();
      }); 

我确信我做错了什么，但我就是无法弄清楚。

我的代码可以在 http://jsfiddle.net/0h55fdzL/ 找到

我只使用 KineticJS 几个小时，所以如果这是一个愚蠢的问题，我深表歉意

感谢您的帮助!

Answer 1

1 为 x 变量创建闭包。

2 使用target代替targetNode

var x = -50;
var y = -50;

var stage = new Kinetic.Stage({
  container: 'container',
  width: 1200,
  height: 1200,
});

for (i=0; i<3; i++){
  x = x + 50;
  y = y + 50;

  var layer = [];
  layer[i] = new Kinetic.Layer();

  var hex = [];
  (function(x){
    hex[i] = new Kinetic.Shape({
      sceneFunc: function(context) {
        context.beginPath();
        context.moveTo(x+25, 0);
        context.lineTo(x+40, 10);
        context.lineTo(x+40, 25);
        context.lineTo(x+25, 35);
        context.lineTo(x+10, 25);
        context.lineTo(x+10, 10);
        context.closePath();
        // KineticJS specific context method
        context.fillStrokeShape(this);
      },
      fill: '#00D2FF',
      stroke: 'black',
      strokeWidth: 4,
      draggable: true,
      rotation:0
    });
  })(x);



  // add the triangle shape to the layer
  layer[i].add(hex[i]);
  // add the layer to the stage
  stage.add(layer[i]);
}


stage.on('click tap', function(evt) {
    evt.target.tween = new Kinetic.Tween({
        node: evt.target,
        duration: 0.3,
        rotationDeg: evt.target.rotation()+45,
        easing: Kinetic.Easings.EaseOut
    });
    evt.target.tween.play();
});

http://jsfiddle.net/0h55fdzL/1/