2014-02-20 20 views
0

我沒有運氣讓下面的代碼在最新版本的KineticJS 5.0中工作。我搜索了更新日誌並找不到問題。移動紅色矩形控制綠色方塊的旋轉。旋轉紅色方塊控制紅色矩形的位置。如何更新dragboundfunc代碼使其在5.0中工作?下面是舊代碼,這裏是我的jsfiddle它使用Kineticjs的舊版本:爲什麼我的dragboundFunc代碼不再在Kineticjs 5.0中工作(僅供參考,我是一個編碼新手)

var rect_red = new Kinetic.Rect({ 
x: 150, 
y: 5, 
width: 80, 
height: 35, 
fill: "red", 
stroke: "black", 
strokeWidth: 2, 
dragOnTop: true, 
draggable: true, 
    dragBoundFunc: function(pos) { 
     var pos = stage.getMousePosition(); 
     var newX = pos.x; 
     var oldY = rect.getRotationDeg(); 
     var newY = pos.y; 
    var theta2 = Math.atan2(newY, newX); 
    var degree_cw = (theta2/(Math.PI/180) *.1); 
    var degree_ccw = (theta2/(Math.PI/180) *-.1); 

     if(newY > oldY) 
     {rect_green.rotateDeg(degree_cw); layer.draw(); } 

     else if(newY < oldY) { 
     rect_green.rotateDeg(degree_ccw)* -1; layer.draw(); 
     } 
     return { 
     x: 150, 
     y: newY, 
       } 
    } 

}); 
layer.add (rect_red); 


var rect_green = 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 degree = theta/(Math.PI/180) - 45; 
    var degree2 = theta/(Math.PI/540); 
    this.setRotationDeg(degree); 
    if (degree < 0){    
    rect_red.setPosition(150,0);} 
    else {rect_red.setPosition(150,degree2); layer.draw();} 
    //var deg = theta * 180/Math.PI; 

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

這裏是jsfiddle:http://jsfiddle.net/eqK2y/ – user3326406

回答

相關問題