Kinetic.js：触摸

Question

旋转图像我有这样的小提琴：

http://jsfiddle.net/WDjpx/2/

图像没有正确地旋转。 ，我使用的代码是：

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

var layer = new Kinetic.Layer(); 
var isDragging = false; 
var refRotation = null; 

var rect = new Kinetic.Rect({ 
    x: 150, 
    y: 150, 
    width: 100, 
    height: 100, 
    fill: 'green', 
    stroke: 'black', 
    strokeWidth: 4, 
    offset: [50, 50], 
    dragOnTop: true, 
    draggable: true, 
    dragBoundFunc: function (pos) { 

     var xd = 150 - pos.x ; 
     var yd = 150 - pos.y ; 
     var theta = Math.atan2(yd, xd); 
     var deg = theta * 180/Math.PI; 

     if (!isDragging) { 
      isDragging = true; 
      refRotation = deg; 
     } else { 
      var rotate = deg - refRotation; 
      rect.setRotationDeg(deg); 
     } 

     return { 
      x: this.getAbsolutePosition().x, 
      y: this.getAbsolutePosition().y 
     } 
    } 
}); 

layer.add（RECT）; stage.add（layer）;

任何人都知道我的数学有什么问题？

---编辑---

与我想要的新feddle： http://jsfiddle.net/zk9cn/

Answer 1

不知道Math.atan2，但似乎x和y的计算是不正确的我。我会从中心扣除位置，而不是从位置中心。 http://jsfiddle.net/bighostkim/qZDcg/

var x = 150 - pos.x; 
    var y = 150 - pos.y; 
    var radian = Math.PI + Math.atan(y/x); 
    this.setRotation(radian); 

其他的事情，我也看到了你的变量是不能使用; isDragging，refRotate和旋转。

-----编辑----

如果你想拿起角落旋转矩形，可以使用下面的代码。 当你拿起角落时，由中心位置计算出的度数已经是45.这就是为什么你不能正确拾取角落的原因。通过调整45看起来是正确的，但是当你拿起直线时，它会再次出错。看来你的要求有一个缺陷，除非它是故意的。 http://jsfiddle.net/bighostkim/7Q5Hd/

var pos = stage.getMousePosition(); 
    var xd = 150 - pos.x ; 
    var yd = 150 - pos.y ; 
    var theta = Math.atan2(yd, xd); 
    var degree = theta/(Math.PI/180) - 45; 
    this.setRotationDeg(degree);