Question

过去一小时我一直在盯着这个，但无法理解。

我试图使用KineticJS在点击时将形状旋转45度。我从上一个关于Stack Overflow的问题中找到了http://jsfiddle.net/JUu2Q/6/，这基本上完全符合我的要求。当我将此应用于我的代码（并更改＆＃39;层＆＃39;到＆＃39; stage＆＃39;）时，我收到以下错误：无法读取属性＆＃39;旋转＆＃39;未定义：

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/

无法读取未定义的kineticjs的属性“旋转”

1 个答案: