I am a non-native English speaker and I am a beginner of programming language. I understand that my explanation is not best but I am trying to explain better to people to understand what I am trying to do. So, please be patient with me and please not try to downvote (it hurt my feelings) instead of telling me why my explanation is bad. I appreciate your time to read this. Thank you.
I am working on a canvas game called coin sorting game which is dragging the coins to the correct piggy bank images and it will make the correct and the wrong sound when the coin touches correct image or not.
I am stuck with if condition right now.
In the current state, a correct sound will play when the specific coin image touches the specific piggy bank image. However, the wrong sound also plays when any coin images touch to any piggy bank images. I am struggling to define else condition for this problem.
I tried to set the wrong audio function in else condition but the wrong sounds will play when any coin images moving and touch to the piggy bank images.
playYesAudio();
}else{
playNoAudio();
}
This is the HTML code...
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/konva#4.0.5/konva.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css"
</head>
<body>
<div id="stage-parent">
<div id="container">
</div>
</div>
<audio id="yesAudio" >
<source src="Audio/yes.mp3" type="audio/mpeg">
</audio>
<audio id="noAudio" >
<source src="Audio/no.mp3" type="audio/mpeg">
</audio>
<script src="JS/moneysort.js"
</body>
</html>
This is the JS code...
var stageWidth = 1000;
var stageHeight = 800;
var stage = new Konva.Stage({
width: stageWidth,
height: stageHeight,
container: 'container'
});
var layer = new Konva.Layer();
stage.add(layer);
//1yen
var ichiYenImg = new Konva.Image({
x:20,
y:20,
width:100,
height: 100,
draggable: true,
name: '1yen'
});
layer.add(ichiYenImg);
//5yen
var goYenImg = new Konva.Image({
x:250,
y:20,
width:100,
height: 100,
draggable: true,
name: '5yen'
});
layer.add(goYenImg);
//10yen
var jyuYenImg = new Konva.Image({
x:250,
y:150,
width:100,
height: 100,
draggable: true,
name: '10yen'
});
layer.add(jyuYenImg);
//50yen
var gojyuYenImg = new Konva.Image({
x:20,
y:150,
width:100,
height: 100,
draggable: true,
name: '50yen'
});
layer.add(gojyuYenImg);
//500yen
var gohyakuYenImg = new Konva.Image({
x:130,
y:20,
width:100,
height: 100,
draggable: true,
name:'500yen'
});
layer.add(gohyakuYenImg);
//100yen
var hyakuYenImg = new Konva.Image({
x:130,
y:150,
width:100,
height: 100,
draggable: true,
name: '100yen'
});
layer.add(hyakuYenImg);
//piggy bank 1yen
var ichiYenpiggyImg = new Konva.Image({
x:100,
y:500,
width:100,
height: 100,
draggable: false,
name: '1yen'
});
layer.add(ichiYenpiggyImg);
//piggy bank 5yen
var goYenpiggyImg = new Konva.Image({
x:450,
y:500,
width:100,
height: 100,
draggable: false,
name: '5yen'
});
layer.add(goYenpiggyImg);
//piggy bank 10yen
var jyuYenpiggyImg = new Konva.Image({
x:800,
y:500,
width:100,
height: 100,
draggable: false,
name: '10yen'
});
layer.add(jyuYenpiggyImg);
//piggy bank 50yen
var gojyuYenpiggyImg = new Konva.Image({
x:100,
y:650,
width:100,
height: 100,
draggable: false,
name: '50yen'
});
layer.add(gojyuYenpiggyImg);
//piggy bank 100yen
var hyakuYenpiggyImg = new Konva.Image({
x:450,
y:650,
width:100,
height: 100,
draggable: false,
name: '100yen'
});
layer.add(hyakuYenpiggyImg);
//piggy bank 500yen
var gohyakuYenpiggyImg = new Konva.Image({
x:800,
y:650,
width:100,
height: 100,
draggable: false,
name: '500yen'
});
layer.add(gohyakuYenpiggyImg);
//1yen
var imageObj1 = new Image();
imageObj1.onload = function(){
ichiYenImg.image(imageObj1);
layer.draw();
};
var sourceImg1 = "https://illustrain.com/img/work/2016/illustrain09-okane5.png";
drawImage(sourceImg1, ichiYenImg);
//5yen
var sourceImg2 = "https://illustrain.com/img/work/2016/illustrain09-okane6.png";
drawImage(sourceImg2, goYenImg);
//10yen
var sourceImg3 = "https://illustrain.com/img/work/2016/illustrain09-okane7.png";
drawImage(sourceImg3, jyuYenImg);
//50yen
var sourceImg4 = "https://illustrain.com/img/work/2016/illustrain02-money04.png";
drawImage(sourceImg4, gojyuYenImg);
//100yen
var sourceImg5 = "https://illustrain.com/img/work/2016/illustrain09-okane8.png";
drawImage(sourceImg5, hyakuYenImg);
//500yen
var sourceImg6 = "https://illustrain.com/img/work/2016/illustrain02-money06.png";
drawImage(sourceImg6, gohyakuYenImg);
//piggy1yen
var sourceImg7 = "https://user-images.githubusercontent.com/31402838/63416628-a322b080-c3b4-11e9-96e8-e709ace70ec1.png";
drawImage(sourceImg7, ichiYenpiggyImg);
//piggy5yen
var sourceImg8 = "https://user-images.githubusercontent.com/31402838/63416629-a322b080-c3b4-11e9-94a8-eb6c008d4584.png";
drawImage(sourceImg8, goYenpiggyImg);
//piggy10yen
var sourceImg9 = "https://user-images.githubusercontent.com/31402838/63416630-a322b080-c3b4-11e9-95ef-a04228fc3c0d.png";
drawImage(sourceImg9, jyuYenpiggyImg);
//piggy50yen
var sourceImg10 = "https://user-images.githubusercontent.com/31402838/63416631-a322b080-c3b4-11e9-9e99-43061e2eaf2c.png";
drawImage(sourceImg10, gojyuYenpiggyImg);
//piggy100yen
var sourceImg11 = "https://user-images.githubusercontent.com/31402838/63416626-a322b080-c3b4-11e9-9ff6-00b3babf3fe9.png";
drawImage(sourceImg11, hyakuYenpiggyImg);
//piggy500yen
var sourceImg12 = "https://user-images.githubusercontent.com/31402838/63416627-a322b080-c3b4-11e9-86c4-4edf13a57063.png";
drawImage(sourceImg12, gohyakuYenpiggyImg);
// This will draw the image on the canvas.
function drawImage(source, konvaImage) {
var image = new Image();
image.src = source;
image.onload = function() {
konvaImage.image(image);
layer.draw();
}
}
//use event delegation to update pointer style
layer.on('mouseover', function(evt){
var shape = evt.target;
document.body.style.cursor = 'pointer';
shape.strokeEnabled(false);
layer.draw();
});
layer.on('mouseout', function(evt){
var shape = evt.target;
document.body.style.cursor = 'default';
shape.strokeEnabled(false);
layer.draw();
});
//collistion
layer.on('dragmove', function(e){
var target = e.target;
var targetRect = e.target.getClientRect();
layer.children.each(function(obj){
if(obj === target){
return;
}
// capture the result of the intersection test
var checkHit = haveIntersection(obj.getClientRect(), targetRect);
//get the objects name attribute
var nameDragged1 = e.target.attrs.name;
var namePiggy1 = obj.attrs.name;
var nameDragged5 = e.target.attrs.name;
var namePiggy5 = obj.attrs.name;
var nameDragged500 = e.target.attrs.name;
var namePiggy500 = obj.attrs.name;
var nameDragged10 = e.target.attrs.name;
var namePiggy10 = obj.attrs.name;
var nameDragged100 = e.target.attrs.name;
var namePiggy100 = obj.attrs.name;
var nameDragged50 = e.target.attrs.name;
var namePiggy50 = obj.attrs.name;
//decide if they match
var checkNames = (nameDragged1 === namePiggy1 && nameDragged5 === namePiggy5&& nameDragged500 === namePiggy500 && nameDragged10 === namePiggy10 && nameDragged100 === namePiggy100 && nameDragged50 === namePiggy50 );
//finaly decide if we have a valid hit
if(checkHit && checkNames){
playYesAudio();
}else{
playNoAudio();
}
});
});
function haveIntersection(r1, r2){
return!(
r2.x > r1.x + r1.width/2 ||
r2.x + r2.width/2 < r1.x ||
r2.y > r1.y + r1.height/2 ||
r2.y + r2.height/2 < r1.y
);
}
var y = document.getElementById("yesAudio");
function playYesAudio() {
y.play();
}
var x = document.getElementById("noAudio");
function playNoAudio() {
x.play();
}
/*
function fitStageIntoParentContainer(){
var container = document.querySelector('#stage-parent');
var containerWidth = container.offsetWidth;
var scale = containerWidth / stageWidth;
stage.width(stageWidth * scale);
stage.height(stageHeight * scale);
stage.scale({x:scale, y: scale});
stage.draw();
}
fitStageIntoParentContainer();
window.addEventListener('resize', fitStageIntoParentContainer);
*/
Do I need to create a loop to else condition to select all the piggy bank images except the correct one to play the wrong sound audio?
Any help would be greatly appreciated!
The condition for checking if a sound should play, and which sound should be played is not quite right.
Your first condition checkHit determines if the coin has intersected with a piggy bank. The condition checkNames determines which sound should play. However, you evaluate both, and if either one is false you play the "no" audio. So the "no" audio will play even when there was no intersection. You should only be playing any sound if they intersect, then deciding which to play.
// finaly decide if we have a valid hit
if(checkHit) {
// Decide if it's the right coin + piggy bank
if (checkNames) {
playYesAudio();
} else {
playNoAudio();
}
}
Related
I want to create a function that make collision detection with two objects in canvas using JavaScript. I have coin objects and piggy bank objects. I am trying to create a function that when the coin touches the piggy bank, the coin object will disappear. Can anyone help me to explain the algorithm of the collision detection please?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/konva#4.0.5/konva.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
margin:0;
padding: 0;
overflow: hidden;
background-color: lightyellow;
}
.konvajs-content{
background-color: aliceblue;
margin: 5%;
border: solid 5px gray;
}
#stage-parent{
width: 100%;
}
</style>
</head>
<body>
<div id="stage-parent">
<div id="container"></div>
</div>
<script>
var stageWidth = 1200;
var stageHeight = 1200;
var stage = new Konva.Stage({
width: stageWidth,
height: stageHeight,
container: 'container'
});
var layer = new Konva.Layer();
stage.add(layer);
//1yen
var ichiYenImg = new Konva.Image({
x:20,
y:20,
width:100,
height: 100,
draggable: true
});
layer.add(ichiYenImg);
//5yen
var goYenImg = new Konva.Image({
x:200,
y:20,
width:100,
height: 100,
draggable: true
});
layer.add(goYenImg);
//10yen
var jyuYenImg = new Konva.Image({
x:200,
y:50,
width:100,
height: 100,
draggable: true
});
layer.add(jyuYenImg);
//50yen
var gojyuYenImg = new Konva.Image({
x:20,
y:50,
width:100,
height: 100,
draggable: true
});
layer.add(gojyuYenImg);
//500yen
var gohyakuYenImg = new Konva.Image({
x:100,
y:20,
width:100,
height: 100,
draggable: true
});
layer.add(gohyakuYenImg);
//100yen
var hyakuYenImg = new Konva.Image({
x:100,
y:50,
width:100,
height: 100,
draggable: true
});
layer.add(hyakuYenImg);
//piggy bank 1yen
var ichiYenpiggyImg = new Konva.Image({
x:100,
y:500,
width:100,
height: 100,
draggable: false
});
layer.add(ichiYenpiggyImg);
//piggy bank 5yen
var goYenpiggyImg = new Konva.Image({
x:450,
y:500,
width:100,
height: 100,
draggable: false
});
layer.add(goYenpiggyImg);
//piggy bank 10yen
var jyuYenpiggyImg = new Konva.Image({
x:800,
y:500,
width:100,
height: 100,
draggable: false
});
layer.add(jyuYenpiggyImg);
//piggy bank 50yen
var gojyuYenpiggyImg = new Konva.Image({
x:100,
y:650,
width:100,
height: 100,
draggable: false
});
layer.add(gojyuYenpiggyImg);
//piggy bank 100yen
var hyakuYenpiggyImg = new Konva.Image({
x:450,
y:650,
width:100,
height: 100,
draggable: false
});
layer.add(hyakuYenpiggyImg);
//piggy bank 500yen
var gohyakuYenpiggyImg = new Konva.Image({
x:800,
y:650,
width:100,
height: 100,
draggable: false
});
layer.add(gohyakuYenpiggyImg);
//1yen
var imageObj1 = new Image();
imageObj1.onload = function(){
ichiYenImg.image(imageObj1);
layer.draw();
};
var sourceImg1 = "https://illustrain.com/img/work/2016/illustrain09-okane5.png";
drawImage(sourceImg1, ichiYenImg);
//5yen
var sourceImg2 = "https://illustrain.com/img/work/2016/illustrain09-okane7.png";
drawImage(sourceImg2, goYenImg);
//10yen
var sourceImg3 = "https://illustrain.com/img/work/2016/illustrain09-okane6.png";
drawImage(sourceImg3, jyuYenImg);
//50yen
var sourceImg4 = "https://illustrain.com/img/work/2016/illustrain02-money04.png";
drawImage(sourceImg4, gojyuYenImg);
//100yen
var sourceImg5 = "https://illustrain.com/img/work/2016/illustrain09-okane8.png";
drawImage(sourceImg5, hyakuYenImg);
//500yen
var sourceImg6 = "https://illustrain.com/img/work/2016/illustrain02-money06.png";
drawImage(sourceImg6, gohyakuYenImg);
//piggy1yen
var sourceImg7 = "https://user-images.githubusercontent.com/31402838/63416628-a322b080-c3b4-11e9-96e8-e709ace70ec1.png";
drawImage(sourceImg7, ichiYenpiggyImg);
//piggy5yen
var sourceImg8 = "https://user-images.githubusercontent.com/31402838/63416629-a322b080-c3b4-11e9-94a8-eb6c008d4584.png";
drawImage(sourceImg8, goYenpiggyImg);
//piggy10yen
var sourceImg9 = "https://user-images.githubusercontent.com/31402838/63416630-a322b080-c3b4-11e9-95ef-a04228fc3c0d.png";
drawImage(sourceImg9, jyuYenpiggyImg);
//piggy50yen
var sourceImg10 = "https://user-images.githubusercontent.com/31402838/63416631-a322b080-c3b4-11e9-9e99-43061e2eaf2c.png";
drawImage(sourceImg10, gojyuYenpiggyImg);
//piggy100yen
var sourceImg11 = "https://user-images.githubusercontent.com/31402838/63416626-a322b080-c3b4-11e9-9ff6-00b3babf3fe9.png";
drawImage(sourceImg11, hyakuYenpiggyImg);
//piggy500yen
var sourceImg12 = "https://user-images.githubusercontent.com/31402838/63416627-a322b080-c3b4-11e9-86c4-4edf13a57063.png";
drawImage(sourceImg12, gohyakuYenpiggyImg);
// This will draw the image on the canvas.
function drawImage(source, konvaImage) {
var image = new Image();
image.src = source;
image.onload = function() {
konvaImage.image(image);
layer.draw();
}
}
//use event delegation to update pointer style
layer.on('mouseover', function(evt){
var shape = evt.target;
document.body.style.cursor = 'pointer';
shape.strokeEnabled(false);
layer.draw();
});
layer.on('mouseout', function(evt){
var shape = evt.target;
document.body.style.cursor = 'default';
shape.strokeEnabled(false);
layer.draw();
});
function fitStageIntoParentContainer(){
var container = document.querySelector('#stage-parent');
var containerWidth = container.offsetWidth;
var scale = containerWidth / stageWidth;
stage.width(stageWidth * scale);
stage.height(stageHeight * scale);
stage.scale({x:scale, y: scale});
stage.draw();
}
fitStageIntoParentContainer();
window.addEventListener('resize', fitStageIntoParentContainer);
</script>
</body>
</html>
First thing when debugging these problems is to reduce your code to a small example.
Once you have that, then you can go into more complicated things.
Below is your code with working collision:
var stage = new Konva.Stage({
width: 400,
height: 200,
container: 'container'
});
var layer = new Konva.Layer();
stage.add(layer);
layer.on('dragmove', function(e) {
var target = e.target;
var targetRect = e.target.getClientRect();
layer.children.each(function(obj) {
if (obj === target) {
return;
}
if (haveIntersection(obj.getClientRect(), targetRect)) {
alert("Intersection")
}
});
});
function haveIntersection(r1, r2) {
return !(
r2.x > r1.x + r1.width/2 ||
r2.x + r2.width/2 < r1.x ||
r2.y > r1.y + r1.height/2 ||
r2.y + r2.height/2 < r1.y
);
}
// This will draw the image on the canvas.
function drawImage(source, konvaImage) {
layer.add(konvaImage);
var image = new Image();
image.src = source;
image.onload = function() {
konvaImage.image(image);
layer.draw();
}
}
//1yen
var ichiYenImg = new Konva.Image({
x: 20,
y: 20,
width: 100,
height: 100,
draggable: true
});
var sourceImg1 = "https://illustrain.com/img/work/2016/illustrain09-okane5.png";
drawImage(sourceImg1, ichiYenImg);
//piggy bank 1yen
var ichiYenpiggyImg = new Konva.Image({
x: 300,
y: 100,
width: 100,
height: 100,
draggable: false
});
var sourceImg7 = "https://user-images.githubusercontent.com/31402838/63416628-a322b080-c3b4-11e9-96e8-e709ace70ec1.png";
drawImage(sourceImg7, ichiYenpiggyImg);
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/konva#4.0.5/konva.min.js"></script>
</head>
<body>
<div id="stage-parent">
<div id="container"></div>
</div>
</body>
</html>
The key here is the function haveIntersection there we assume that the collision boxes are squares 1/2 the with and height of the objects.
The conditions inside that functions are:
Is the RIGHT edge of r1 to the RIGHT of the LEFT edge of r2? OR
Is the LEFT edge of r1 to the LEFT of the RIGHT edge of r2? OR
Is the BOTTOM edge of r1 BELOW the TOP edge of r2? OR
Is the TOP edge of r1 ABOVE the BOTTOM edge of r2?
There are more details here:
http://jeffreythompson.org/collision-detection/rect-rect.php
I follow the Documentation that Konva have.
https://konvajs.github.io/docs/select_and_transform/Basic_demo.html
and
https://konvajs.github.io/docs/sandbox/Image_Resize.html
But the problem is they only have transform demo for rectangle shape. My plan is to have it on image. But so far I cant get it right. Here's my example code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/konvajs/konva/master/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Image Resize Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>
<body class="col-md-12">
<div id="container" class="col-md-10">
</div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
function testFunction() {
addCanvas();
}
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.get('.topLeft')[0];
var topRight = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft = group.get('.bottomLeft')[0];
var image = group.get('Image')[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
image.position(topLeft.position());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if (width && height) {
image.width(width);
image.height(height);
}
}
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
stage.add(layer);
// darth vader
var darthVaderImg = new Konva.Image({
width: 200,
height: 137,
name: 'imgs'
});
// yoda
var yodaImg = new Konva.Image({
width: 93,
height: 104,
name: 'imgs'
});
var darthVaderGroup = new Konva.Group({
x: 180,
y: 50,
draggable: true,
id: 'test1',
name: 'Imgs'
});
var num = 0;
function addCanvas() {
var test = new Konva.Group({
x: 200,
y: 100,
draggable: true
});
var testImg = new Konva.Image({
width: 93,
height: 104
});
layer.add(test);
test.add(testImg);
console.log('test');
var imageObjs = new Image();
imageObjs.onload = function() {
testImg.image(imageObjs);
layer.draw();
};
imageObjs.src = './pic/test2.png';
}
layer.add(darthVaderGroup);
darthVaderGroup.add(darthVaderImg);
var yodaGroup = new Konva.Group({
x: 20,
y: 110,
draggable: true,
id: 'Imgs',
});
layer.add(yodaGroup);
yodaGroup.add(yodaImg);
var imageObj1 = new Image();
imageObj1.onload = function() {
darthVaderImg.image(imageObj1);
layer.draw();
};
imageObj1.src = './pic/test2.png';
var imageObj2 = new Image();
imageObj2.onload = function() {
yodaImg.image(imageObj2);
layer.draw();
};
imageObj2.src = './pic/test1.jpg';
stage.on('click', function(e) {
if (e.target === stage) {
stage.find('Transformer').destroy();
layer.draw();
return;
}
// do nothing if clicked NOT on our rectangles
if (!e.target.hasName('imgs')) {
return;
}
// remove old transformers
// TODO: we can skip it if current rect is already selected
stage.find('Transformer').destroy();
// create new transformer
var tr = new Konva.Transformer();
layer.add(tr);
tr.attachTo(e.target);
layer.draw();
});
function addTrans(e) {
}
</script>
</body>
</html>
The output
Here's the output. Whenever I click the image the transform will be out of place and will on stay in 1 place.
I finally figure it out. Turn out I place the draggable in the wrong place. I put the draggable into the Konva.Image instead in the group.
Thanks
I have tried following
first load the image into the stage.
function loadPhoneImage() {
phoneImageStage = new Konva.Stage({
container: 'phoneContainer',
width: 600,
height: 550
});
phoneImageLayer = new Konva.Layer();
phoneImageStage.add(phoneImageLayer);
var phoneImg = new Konva.Image({
x: 30,
y: 20,
width: 450,
height: 500
});
phoneImageLayer.add(phoneImg);
var phoneImage = new Image();
var self = this;
phoneImage.onload = function () {
phoneImg.image(phoneImage);
phoneImageLayer.draw();
};
phoneImage.src = '../Content/Avaya_Phone.png';
}
Then programmatically added some labels on it
function loadPhoneNumberLabel(label) {
var phoneText = new Konva.Text({
x: 135,
y: 73,
text: label,
fontSize: 9,
width: 200,
fontFamily: 'Calibri',
fill: 'black',
align: 'right'
});
phoneImageLayer.add(phoneText);
}
After this i want to scale this image as per the browser size and also label position should not be changed on the image.so i have tried this
function fitStageIntoParentContainer() {
//var stageWidth = document.getElementsByClassName("msgbox")[0].offsetWidth;
//var stageHeight = document.getElementsByClassName("msgbox")[0].clientHeight;
var stageWidth=$( window ).width();
var stageHeight=$( window ).height();
//var stageWidth=$('#phoneContainer').width();;
//var stageHeight=$('#phoneContainer').height();
console.log(stageWidth);
console.log(stageHeight);
var container = document.querySelector('#phoneContainer');
if(container){
// now we need to fit stage into parent
var containerWidth = $('#phoneContainer').width();
var containerHeight = $('#phoneContainer').height();
// to do this we need to scale the stage
var scale = (containerWidth/ stageWidth);
scale=1;
console.log(scale);
phoneImageStage.width(containerWidth);
phoneImageStage.height(containerHeight);
//phoneImageStage.width(containerWidth);
//phoneImageStage.height(containerWidth);
phoneImageStage.scale({ x: scale, y: scale });
var phoneImg = new Konva.Image({
x: 30,
y: 20,
width: 200,
height: 300
});
phoneImageLayer.add(phoneImg);
var phoneImage = new Image();
var self = this;
phoneImage.onload = function () {
phoneImg.image(phoneImage);
phoneImageLayer.draw();
};
phoneImage.src = '../Content/Avaya_Phone.png';
phoneImageStage.draw();
}
}
it scaling the image but not in the same scale as browser.
Would appreciate any help on this.
Disclaimer: it may be considered this post is a duplicate of this post but I have demonstrated my need specifically.
I have a case in my KonvaJS application where I need to propagate a click event from the Rectangle shape (that is a child of the Upper Layer) to several images that are added to the Lower Layer.
Please note that I have in the Lower layer more than 50 objects between images and shapes, so how can I now what is the target object in the Lower Layer.
Kindly here is an example to demonstrate my need:
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var lowerLayer = new Konva.Layer();
var upperLayer = new Konva.Layer();
//lion
var lionImage = new Image();
lionImage.onload = function() {
var lion = new Konva.Image({
x: 50,
y: 50,
image: lionImage,
width: 106,
height: 118
});
// add the shape to the layer
lowerLayer.add(lion);
stage.draw();
lion.on("click", function() {
alert("you clicked the lion");
});
};
lionImage.src = 'http://konvajs.github.io/assets/lion.png';
//monkey
var monkeyImage = new Image();
monkeyImage.onload = function() {
var monkey = new Konva.Image({
x: 200,
y: 50,
image: monkeyImage,
width: 106,
height: 118
});
// add the shape to the layer
lowerLayer.add(monkey);
stage.draw();
monkey.on("click", function() {
alert("you clicked the monkey");
});
};
monkeyImage.src = 'http://konvajs.github.io/assets/monkey.png';
var upperTransparentBox = new Konva.Rect({
x: 0,
y: 0,
height: stage.height(),
width: stage.width(),
fill: 'transparent',
draggable: false,
name: 'upperTransparentBox'
});
upperTransparentBox.on("click", function() {
alert("you clicked the upper Transparent Box");
});
upperLayer.add(upperTransparentBox);
// add the layer to the stage
stage.add(lowerLayer);
stage.add(upperLayer);
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Image Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
Technically it is possible to manually trigger click event on any node.
But I think it is an antipattern. You can just find an intersection with 'getIntersection()' function and do what you need with a node.
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var lowerLayer = new Konva.Layer();
var upperLayer = new Konva.Layer();
//lion
var lionImage = new Image();
lionImage.onload = function() {
var lion = new Konva.Image({
x: 50,
y: 50,
name: 'lion',
image: lionImage,
width: 106,
height: 118
});
// add the shape to the layer
lowerLayer.add(lion);
stage.draw();
lion.on("click", function() {
alert("you clicked the lion");
});
};
lionImage.src = 'http://konvajs.github.io/assets/lion.png';
//monkey
var monkeyImage = new Image();
monkeyImage.onload = function() {
var monkey = new Konva.Image({
x: 200,
y: 50,
name: 'monkey',
image: monkeyImage,
width: 106,
height: 118
});
// add the shape to the layer
lowerLayer.add(monkey);
stage.draw();
monkey.on("click", function() {
alert("you clicked the monkey");
});
};
monkeyImage.src = 'http://konvajs.github.io/assets/monkey.png';
var upperTransparentBox = new Konva.Rect({
x: 0,
y: 0,
height: stage.height(),
width: stage.width(),
fill: 'transparent',
draggable: false,
name: 'upperTransparentBox'
});
upperTransparentBox.on("click", function() {
var target = lowerLayer.getIntersection(stage.getPointerPosition());
if (target) {
alert('clicked on ' + target.name());
}
});
upperLayer.add(upperTransparentBox);
// add the layer to the stage
stage.add(lowerLayer);
stage.add(upperLayer);
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Image Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
I have a script that works properly, shows an image and you can drag and drop that image. But my problem is: how can I add more images? If I copy the same code, it doesn't show two images.
<script src="http://d3lp1msu2r81b...c-v5.0.2.min.js"></script>
<script defer="defer">
function drawImage(imageObj) {
var stage = new Kinetic.Stage({
container: "container",
width: 800,
height: 600
});
var layer = new Kinetic.Layer();
// darth vader
var darthVaderImg = new Kinetic.Image({
image: imageObj,
x: 100,
y: 30,
width: 40,
height: 40,
draggable: true
});
// add cursor styling
darthVaderImg.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
darthVaderImg.on('mouseout', function() {
document.body.style.cursor = 'default';
});
layer.add(darthVaderImg);
stage.add(layer);
}
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'adorno1.png';
</script>
function drawImage(imageObj) {
var stage = new Kinetic.Stage({
container: "container",
width: 800,
height: 600
});
var layer = new Kinetic.Layer();
// darth vader
var darthVaderImg = new Kinetic.Image({
image: imageObj,
x: 0,
y: 0,
width: 100,
height: 100,
draggable: true
});
var darthVaderImg1 = new Kinetic.Image({
image: imageObj1,
x: 100,
y: 100,
width:100,
height: 100,
draggable: true
});
// add cursor styling
darthVaderImg.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
darthVaderImg.on('mouseout', function() {
document.body.style.cursor = 'default';
});
layer.add(darthVaderImg);
layer.add(darthVaderImg1);
stage.add(layer);
}
var imageObj = new Image();
var imageObj1 = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj1.onload = function() {
drawImage(this);
};
imageObj.src='http://i.forbesimg.com/media/lists/companies/google_416x416.jpg';
imageObj1.src='http://i.forbesimg.com/media/lists/companies/google_416x416.jpg';
here is the answer for your question
http://jsfiddle.net/ajayholla/71qrotzz/5/