我沒有運氣讓下面的代碼在最新版本的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
}
}
});
這裏是jsfiddle:http://jsfiddle.net/eqK2y/ – user3326406