2013-02-19 33 views
0

旋轉圖像我有這樣的小提琴:Kinetic.js:觸摸

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/

+0

我不認爲你的數學沒有錯。它正確旋轉。當你說錯誤時,它會做什麼以及期望什麼。我注意到的唯一的事情就是光標離矩形越近越好。但這是因爲沒有處理。如果在紅色矩形邊框上移動時旋轉。它工作正常。 – 2013-02-19 04:25:15

回答

2

不知道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); 
+0

你的小提琴也不正確。我想要的是點擊一個方形角落並移動,我希望角落隨着鼠標旋轉。在這feddle,鼠標rotatig更快...... – 2013-02-19 12:28:14

+0

不知道什麼是「不正確旋轉」的意思。更新了答案。 – allenhwkim 2013-02-19 15:51:25

+0

謝謝!錯誤的'pos':新的feddle:http://jsfiddle.net/zk9cn/ – 2013-02-19 18:20:44