Is it possible to rotate a group after we drag drop the certain object onto them in konvajs? - konvajs

Question

I'm trying to animate the weighing machine i.e. if the user drag and drops the balls on the weights of the machine, the machine should move according to the weights of the balls afterward.
The weighing machine would not be animated from the start but will move when the user puts some balls on either side of the machine.
I'm using konvajs, how can I make this possible?

Answer 1

I used the following approach to solve the above-given problem.
function createCanvas(){
var width = window.innerWidth;
var height = window.innerHeight;
var leftBalls = 0;
var rightBalls = 0;
var tries = 0;
//Initialize stage
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
//Initialize Layer
var layer = new Konva.Layer();
stage.add(layer)
//Create output
var output = new Konva.Text({
x: (width/2)-134,
y: 140,
fontSize: 35,
fontFamily: 'Calibri',
});
layer.add(output);
// win text
var wintext = new Konva.Text({
x: (width/2)-134,
y: 70,
fontSize: 35,
fontFamily: 'Calibri',
});
layer.add(wintext);
// tries box
var triesText1 = new Konva.Text({
x: width-100,
y: 4,
text: "No. of tries",
fontSize: 20,
fontFamily: 'Calibri',
});
layer.add(triesText1);
var triesBox = new Konva.Rect({
x: width-90,
y: 25,
width: 70,
height: 50,
fill: 'white',
stroke: 'black',
strokeWidth: 3,
});
layer.add(triesBox);
var triesText2 = new Konva.Text({
x: width-62,
y: 36,
text: '0',
fontSize: 30,
fontFamily: 'Calibri',
});
layer.add(triesText2);
//Create Weighing Machine
var oval = new Konva.Ellipse({
x: ((width/2))+15,
y: (height-170),
radiusX: 3,
radiusY: 65,
fill: 'black',
stroke: 'black',
strokeWidth: 3,
});
layer.add(oval);
var ovalTwo = new Konva.Ellipse({
x: ((width/2))+15,
y: (height-200),
radiusX: 100,
radiusY: 3,
fill: 'black',
stroke: 'black',
strokeWidth: 3,
});
//layer.add(ovalTwo);
var LineOne = new Konva.Line({
x: (width/2)-47,
y: height-201,
stroke: 'black',
strokeWidth: 5,
points: [0,0,32,75],
});
//layer.add(LineOne);
var LineTwo = new Konva.Line({
x: (width/2)-47,
y: height-201,
stroke: 'black',
strokeWidth: 5,
points: [0,0,-33,73],
});
//layer.add(LineTwo);
var semiCircle1= new Konva.Arc({
x: (width/2)-48,
y: height-130,
innerRadius: 30,
outerRadius: 40,
angle: 180,
fill: 'black',
stroke: 'black',
strokeWidth: 1,
});
//layer.add(semiCircle);
var LineThree = new Konva.Line({
x: (width/2)+91,
y: height-201,
stroke: 'black',
strokeWidth: 5,
points: [0,0,32,75],
});
//layer.add(LineThree);
var LineFour = new Konva.Line({
x: (width/2)+91,
y: height-201,
stroke: 'black',
strokeWidth: 5,
points: [0,0,-33,73],
});
//layer.add(LineFour);
var semiCircle2= new Konva.Arc({
x: (width/2)+89,
y: height-130,
innerRadius: 30,
outerRadius: 40,
angle: 180,
fill: 'black',
stroke: 'black',
strokeWidth: 1,
});
//layer.add(semiCircle);
var wUpperPart = new Konva.Group({
x: 0,
y: 0,
});
wUpperPart.add(semiCircle1,semiCircle2,LineOne,LineTwo,LineThree,LineFour,ovalTwo);
layer.add(wUpperPart)
function moveMachineLeft(){
var tween = new Konva.Tween({
node: wUpperPart,
duration: 2,
rotation: -1.7,
easing: Konva.Easings.BackEaseOut,
onFinish: function () {
writeMessage('tween finished!');
},
});
setTimeout(function () {
tween.play();
}, 10);
}
function moveMachineRight(){
var tween = new Konva.Tween({
node: wUpperPart,
duration: 2,
rotation: 1.7,
easing: Konva.Easings.BackEaseOut,
onFinish: function () {
writeMessage('tween finished!');
},
});
setTimeout(function () {
tween.play();
}, 100);
}
//Create circle
function createCircle(x, y, fill, id) {
var circle = new Konva.Circle({
x: x,
y: y,
radius: 13,
fill: fill,
stroke: 'black',
strokeWidth: 1,
id: id,
draggable: true,
});
layer.add(circle);
var startPos = 0;
circle.on('dragstart',function() {
startPos = stage.getPointerPosition();
});
circle.on('dragend', function() {
const pointerPos = stage.getPointerPosition();
console.log(pointerPos);
console.log((width/2)+70);
console.log((width/2)+111);
if ((pointerPos.x <= (width/2)-33 && pointerPos.x >= (width/2)-85) &&
pointerPos.y<=height-103 && pointerPos.y>=height-155){
leftBalls = circle.id() + leftBalls;
console.log(leftBalls);
}
else if ((pointerPos.x >= (width/2)+67 && pointerPos.x <= (width/2)+111) &&
(pointerPos.y<=height-103 && pointerPos.y>=height-155)){
rightBalls = rightBalls + circle.id();
console.log(rightBalls);
}
if (((startPos.x >= (width/2)+67 && startPos.x <= (width/2)+111) &&
startPos.y<=height-103 && startPos.y>=height-150) &&
!((pointerPos.x >= (width/2)+67 && pointerPos.x <= (width/2)+111) &&
(pointerPos.y<=height-103 && pointerPos.y>=height-155))){
rightBalls = rightBalls - circle.id();
console.log(rightBalls);
}
if (((startPos.x <= (width/2)-33 && startPos.x >= (width/2)-85) &&
startPos.y<=height-103 && startPos.y>=height-150) &&
!((pointerPos.x <= (width/2)-33 && pointerPos.x >= (width/2)-85) &&
(pointerPos.y<=height-103 && pointerPos.y>=height-155))){
leftBalls = leftBalls - circle.id();
console.log(leftBalls);
}
});
return circle;
}
//Create balls
var id = 0;
var thousands = {};
var x = []
var boolean = [];
var i = 0;
for (i = 320; i < 470; i += 30){
x.push(i)
boolean.push(false)
circle = createCircle(i, 70, '#FF0000', 1);
thousands[id] = circle;
id = id + 1;
}
x.push(i);
circle = createCircle(i, 70, '#FF0000', 2);
thousands[id] = circle;
id = id + 1;
i = i + 30;
for (; i < 540; i += 30){
x.push(i)
boolean.push(false)
circle = createCircle(i, 70, '#FF0000', 1);
thousands[id] = circle;
id = id + 1;
}
document.getElementById('calculate').addEventListener(
'click',
function () {
if (leftBalls>rightBalls){
output.text("Left weight is heavier!");
if (leftBalls==2 && rightBalls==1){
wintext.text("You Won!");
}
tries = tries + 1;
triesText2.text(tries);
}
else if (leftBalls<rightBalls){
output.text("Right weight is heavier!");
if (rightBalls==2 && leftBalls==1){
wintext.text("You Won!");
}
tries = tries + 1;
triesText2.text(tries);
}
else if (leftBalls==rightBalls){
output.text("No weight is heavier!");
tries = tries + 1;
triesText2.text(tries);
}
else if ((leftBalls==0) && (rightBalls==0)){
output.text("No weight is filled!");
}
layer.draw();
},
false
);
layer.draw();
}
createCanvas();
document.getElementById('restart').addEventListener(
'click',
function () {
createCanvas();
},
false
);