I've had no luck making the code below work in the newest version of KineticJS 5.0. I've searched the changelog and can not find the issue. Moving the red rectangle controls the rotation of the green square. Rotating the red square controls the red rectangle's position. How do I update the dragboundfunc code to make it work in 5.0? Below is the old code and here is my jsfiddle which uses an older version of Kineticjs :
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
}
}
});
getMousePosition
is now getPointerPosition
. And offset
should defined as object {x : x, y : y}.
http://jsfiddle.net/lavrton/eqK2y/1/