I am having troubles with my multidimensional array. There are no errors, but the images are not appearing. I don't know why. please help
<!doctype html>
<html>
<head><script src="kinetic.js"></script></head>
<body>
<div id="canvas" align="center">
<span id="timer"></span>
<div id="container"></div>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 850,
height: 650
});
var layer = new Kinetic.Layer();
var image = [];
var img = [];
var images = [
["1.png","2.png","3.png","4.png"]
];
this is the part where I am having problems:
for (var a = 0; a < 4; a++) {
img[a] = new Image();
img.src = images[0][a];
img.onload = function(){
image[a] = new Kinetic.Image({
x: Math.floor(Math.random()*400),
y: Math.floor(Math.random()*400),
image: img[a],
width: 500,
height: 500
});
layer.add(image[a]);
image[a].draw();
}
}
</script>
</body>
</html>
Related
I'm trying to make a really simple website in javascript.
I want the website to have a stack of images that you can drag.
So far I managed to do it. But now I want to always bring to front the last clicked image.
How can I do this ? Thanks !
Here is my code :
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva#8.4.0/konva.min.js"></script>
<meta charset="utf-8" />
<title></title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
stage.add(layer);
var img1 = new Konva.Image({
x: 20,
y: 20,
width: 400,
height: 566,
draggable: true,
});
layer.add(img1);
var img2 = new Konva.Image({
x: 100,
y: 20,
width: 400,
height: 566,
draggable: true,
});
layer.add(img2);
var imageObj1 = new Image();
imageObj1.onload = function () {
img1.image(imageObj1);
};
imageObj1.src = 'imgs/img1.jpg';
var imageObj2 = new Image();
imageObj2.onload = function () {
img2.image(imageObj2);
};
imageObj2.src = 'imgs/img2.jpg';
</script>
</body>
</html>
I've seen this code on another post, but I don't know how to make it work ..
$("img.myclass").click(function() {
$("img.myclass").not(this).css("z-index", 0);
$(this).css("z-index", 100);
});
The "code on another post" is written in jQuery wich is an javascript library and need to be added to your page as you do with konva.
Konva is a tool that draw an canvas.
You can change zIndex (property that will change order of your stack) when you click on image.
For example:
img1.zIndex(0);
img2.zIndex(1); // will set img2 higher
If image didn't have zIndex() function you can try to wrap it to a group.
const group1 = new Konva.Group();
group1.add(img1);
group1.zIndex(0);
Edit:
Increase zIndex on click.
let zIndex = 0;
img.onclick = function () {
zIndex += 1;
img.zIndex(zIndex);
}
I am trying to draw images on a canvas in a loop
In the following code, if I click on Next the 5 images appear one after the other. If I click on All only the last image appears
What is wrong?
<html>
<head>
<style>
.display-grid{
display: grid;
grid-template-columns: auto auto auto auto;
padding: 10px;
}
</style>
</head>
<body>
<div id="my-grid">
<div class="display-grid">
<span><canvas class="canvas" id="display-0"></canvas></span>
<span><canvas class="canvas" id="display-1"></canvas></span>
<span><canvas class="canvas" id="display-2"></canvas></span>
<span><canvas class="canvas" id="display-3"></canvas></span>
<span><canvas class="canvas" id="display-4"></canvas></span>
</div>
</div>
<button id="next-image">Next</button>
<button id="all-images">All</button>
<script type="text/javascript">
last_image = -1
var next_button= document.getElementById('next-image');
var all_button= document.getElementById('all-images');
next_button.onclick = function(){nextImage()};
all_button.onclick = function(){allImages()};
function nextImage() {
last_image ++
var canvas = document.getElementById('display-'+last_image.toString());
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'image_'+last_image.toString()+'.png';
}
function allImages() {
for (index = 0; index < 5; index++) {
var canvas = document.getElementById('display-'+index.toString());
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'image_'+index.toString()+'.png';
}
}
</script>
</body>
</html>
It happens because the onload function isn't called in the same order as the loop. Some images may take longer to load than others.
You could fix it by checking the image name to know which image is loaded, and then you know in which canvas it should be drawn.
function allImages() {
for (let index = 0; index < 5; index++) {
let imageObj = new Image();
imageObj.name = "display-"+index
imageObj.onload = function() {
console.log("loaded : " + this.name)
let canvas = document.getElementById(this.name);
let context = canvas.getContext('2d');
context.drawImage(this, 0, 0);
};
imageObj.src = 'image_'+index+'.png';
}
}
I am developing canvas to create hotel floor view. I am drawing images on canvas from database. I am taking x,y co-ordinates from database and drawing image on that points. But i want to give touch event to those images. I want to replace image on touch or click event. I want to create same functionality as that of book my show .
this is my code.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:100%;
height:100%;
}
html,body,kineticjs-content {
width:100%;
height:100%;
margin: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://localhost/zoilo_admin/public/kinetic-v5.1.0.js"></script>
<script defer="defer">
function writeMessage(message) {
text.setText(message);
layer.draw();
}
function loadImages(sources, position, callback) {
var assetDir = '';
var images = {};
var loadedImages = 0;
var numImages = 0;
for (i = 0; i < sources.length; i++)
{
numImages++;
}
for (i = 0; i < sources.length; i++)
{
images[i] = new Image();
images[i].onload = function () {
if (loadedImages == (sources.length - 1)) {
callback(images, position);
}
loadedImages++;
};
images[i].src = assetDir + sources[i];
}
}
function buildStage(images, position) {
var positionIndex = 0;
var tableActual = {};
console.log(images);
for (var i = 0; i < sources.length; i++)
{
console.log("Here");
tableActual[i] = new Kinetic.Image({
image: images[i],
x: position[i].x,
y: position[i].y
});
// var tableName = src;
// var table1 = new Kinetic.Image({
// image: images[src],
// x: position[positionIndex].x,
// y: position[positionIndex].y
// });
tableActual[i].on('click', function () {
console.log(this.index);
var image = new Kinetic.Image({
image: '4top.png',
x: position[this.index].x,
y: position[this.index].y
});
drawImage(image);
switch (this.index)
{
case 0:
writeMessage('Click on Table ' + 0);
tableActual[positionIndex] = new Kinetic.Image({
image: images[positionIndex],
x: position[positionIndex].x,
y: position[positionIndex].y
});
this.setIm = "4top.png";
break;
case 1:
writeMessage('Click on Table ' + 1);
break;
case 2:
writeMessage('Click on Table ' + 2);
break;
case 3:
writeMessage('Click on Table ' + 3);
break;
case 4:
writeMessage('Click on Table ' + 4);
break;
}
writeMessage('mouseover ' + this[src]);
});
drawImage(tableActual[i]);
positionIndex++;
}
// finally, we need to redraw the layer hit graph
layer.drawHit();
}
var stage = new Kinetic.Stage({
container: 'container',
width: $(window).width(),
height: $(window).height()
});
var layer = new Kinetic.Layer();
var text = new Kinetic.Text({
x: 10,
y: 10,
fontFamily: 'Calibri',
fontSize: 24,
text: '',
fill: 'black'
});
var sources = [
'house204-2.jpg',
'house204-1.jpg',
'4top.png',
'house204-1.jpg',
'4top.png'
];
var position = [
{
x: 380,
y: 60
},
{
x: 180,
y: 60
}
,
{
x: 90,
y: 60
},
{
x: 260,
y: 60
},
{
x: 50,
y: 60
}
];
loadImages(sources, position, buildStage);
function drawImage(Image)
{
layer.add(Image);
layer.add(text);
stage.add(layer);
// in order to ignore transparent pixels in an image when detecting
// events, we first need to cache the image
Image.cache();
// next, we need to redraw the hit graph using the cached image
Image.drawHitFromCache();
}
</script>
</body>
</html>
Yes! you can change it on touch/click event by changing source of that java script image.
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var yoda = new Kinetic.Image({
x: 140,
y: stage.getHeight() / 2 - 59,
image: imageObj,
width: 106,
height: 118
});
var filteredYoda = new Kinetic.Image({
x: 320,
y: stage.getHeight() / 2 - 59,
image: imageObj,
width: 106,
height: 118
});
// add the shape to the layer
layer.add(yoda);
layer.add(filteredYoda);
// add the layer to the stage
stage.add(layer);
stage.on('click',function(){
imageObj.src = 'http://crushlabs.com/wp-content/uploads/2013/01/jacee-terry-hello-card-business-card-design-back.jpg';
});
// apply grayscale filter to second image
filteredYoda.applyFilter(Kinetic.Filters.Grayscale, null, function() {
layer.draw();
});
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
</script>
I want to make a Map, the user should Scroll it using touch events, zoom in and out using touch gestures.
Here am using the touchstart to set the dragging flag to true, then i use touchmove to calculate the delta in the coordinates and move the layer (map layer) accordingly, then finally i use touchend to set the dragging flag to false.
the problem is it's not working, been banging my head for few hours so far can't get it to work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" href="core/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="core/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="core/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/map.js"></script>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="main" data-role="page">
<div data-role="header">
<h1>Header of #main</h1>
</div>
<div id="content" data-role="content">
<script type="text/javascript" src="core/kinetic-v5.0.1.min.js"> </script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'content',
width: 300,
height: 200
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var yoda = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width: 106,
height: 118
});
layer.add(yoda);
stage.add(layer);
};
imageObj.src = 'image/map-04.png'
var dragging = false,
lastX = 0,
lastY = 0;
imageObj.on('touchstart', function() {
var touchPos = stage.getPointerPosition();
dragging = true;
lastX = touchPos.x;
lastY= touchPos.y;
});
imageObj.on('touchmove', function() {
var touchPos = stage.getPointerPosition();
if(dragging){
var dx = touchPos.x - lastX;
var dy = touchPos.y - lastY;
layer.translate(dx,dy);
lastX = touchPos.x;
lastY = touchPos.y;
}
});
imageObj.on('touchend', function() {
dragging = false;
});
stage.add(layer);
</script>
</div>
<div data-role="footer">
<h4>Footer of #main Page</h4>
</div>
</div>
</body>
</html>
Thanks for your help in advance.
your imgObject is not a kineticjs image, yoda is a kineticjs image, here is a fix with some changes:
http://jsbin.com/miqoxese/1/edit
<script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'content',
width: 300,
height: 200
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var yoda = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width: 106,
height: 118,
draggable: true
});
yoda.on('dragstart', function(){
console.log("dragging"); // see console for result
});
layer.add(yoda);
stage.add(layer);
};
imageObj.src = 'http://www.clker.com/cliparts/8/9/9/d/11949855741697952186small_house_01.svg.med.png';
// stage.add(layer); // no need to add again
</script>
Now you need to attach your touchstart touchend etc events to yoda, not to imgObject which is part of the DOM, not the canvas.
Im making an app, but I ve met the problem. I need when I hit a button add new point (image) on my Canvas. Here is a code:
var ID = 0;
var points = [];
function addPoint(){
points.push({id: ID, posX: 0, posY: 0, url: "img/point.png"});
ID++;
showPoints();
}
function showPoints(){
var img = new Array();
var point = new Array();
var stage = new Kinetic.Stage({
container: 'cvsCroatia',
width: 574,
height: 508
});
var layer = new Kinetic.Layer();
for(var j=0; j < ID; j++){
img[j] = new Image();
img[j].src = 'img/point.png';
img[j].onload = (function(){
point[j] = new Kinetic.Image({
x: points[j].posX,
y: points[j].posY,
image: img[j],
width: 13,
height: 13,
name: img[j],
draggable: true
});
});
layer.add(point[j]);
}
stage.add(layer);
}
But i got an error:
Uncaught TypeError: Cannot set property 'index' of undefined (kinetic-v4.4.0.min.js:29)
Have you got any idea, what is wrong? Thx for answers. Alan..
var img = new Array(); // the simplest solution is to make img visible outside your function
function showPoints(){
// var img = new Array(); // HERE img is a LOCAL variable, only visible to the showPoints() function
var point = new Array();
var stage = new Kinetic.Stage({
container: 'cvsCroatia',
width: 574,
height: 508
});
Thanks for answer, i put all variables to the global scope, but unfortunately got the same error..
var ID = 0;
var points = [];
var img = new Array();
var point = new Array();
function showPoints(){
var stage = new Kinetic.Stage({
container: 'cvsCroatia',
width: 574,
height: 508
});
var layer = new Kinetic.Layer();
for(var j=0; j < ID; j++){
img[j] = new Image();
img[j].src = 'img/point.png';
img[j].onload = (function(){
point[j] = new Kinetic.Image({
x: points[j].posX,
y: points[j].posY,
image: img[j],
width: 13,
height: 13,
name: img[j],
draggable: true
});
});
layer.add(point[j]);
}
stage.add(layer);
}
function addPoint(){
points.push({id: ID, posX: 0, posY: 0, url: "img/point.png"});
ID++;
showPoints();
}