I have a ball and a stick (for a billiard game).
First the ball is placed in a position of a table. On clicking the ball the stick appears, in such a way that we can determine the angle by which stick is placed by clicking the ball (on clicking we determine the angle of mouse with respect to centre of ball and place the stick at that angle touching the ball).
So now the stick is also in the table. Now I am dragging the stick along that angle only, if dragged in another angle than the initial angle it returns false.
On drag end I am calculating the distance moved by the stick and the stick returns to the initial position touching the ball. Then I am trying to move the ball with respect to the angle of the stick and the distance moved by the stick.
The ball moves here but not with respect to any of these. That has become my issue I have updated the fiddle here:
strikerGroup.on('dragend', function () {
var strikerLastPos = strikerGroup.getAbsolutePosition();
strikerGroup.setPosition(initStrikerGrpX, initStrikerGrpY);
striker.speedX = striker.speedY = 2;
var strikerGrpDistMoved = Math.sqrt(((strikerLastPos.x - strikerGroup.getAbsolutePosition().x) * (strikerLastPos.x - strikerGroup.getAbsolutePosition().x)) + ((strikerLastPos.y - strikerGroup.getAbsolutePosition().y) * (strikerLastPos.y - strikerGroup.getAbsolutePosition().y)));
var newX = striker.getX() + (Math.cos(theta) * strikerGrpDistMoved);
var newY = striker.getY() - (Math.sin(theta) * strikerGrpDistMoved);
var strikerMove = new Kinetic.Tween({
node: striker,
duration: 5,
x: newX,
y: newY,
easing: Kinetic.Easings.EaseInOut
});
console.log(striker.getX());
strikerMove.play();
layer.batchDraw();
// strikerGroup striked the striker!!!!
});