我们在 konvajs 中将某个对象拖放到它们上面后，是否可以旋转一个组？
Is it possible to rotate a group after we drag drop the certain object onto them in konvajs?
我正在尝试制作称重机的动画，即如果用户将球拖放到机器的重物上，之后机器应根据球的重量移动。
称重机一开始不会动画，但当用户将一些球放在机器的两侧时会移动。
我正在使用 konvajs，我怎样才能做到这一点？
我使用以下方法解决了上述问题。
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
);
我正在尝试制作称重机的动画，即如果用户将球拖放到机器的重物上，之后机器应根据球的重量移动。
称重机一开始不会动画，但当用户将一些球放在机器的两侧时会移动。
我正在使用 konvajs，我怎样才能做到这一点？
我使用以下方法解决了上述问题。
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
);