I am developing canvas and i am storing multiple images in database with its x and y co-ordinates. And now i want to place this images on canvas on their given position(i.e x,y co-ordinates).
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://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
<script defer="defer">
function writeMessage(message) {
text.setText(message);
layer.draw();
}
function loadImages(sources, callback) {
var assetDir = 'https://dl.dropboxusercontent.com/u/139992952/stackoverflow/';
var images = {};
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function () {
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = assetDir + sources[src];
}
}
function buildStage(images) {
var table2 = new Kinetic.Image({
image: images.table2,
x: 120,
y: 50
});
var table1 = new Kinetic.Image({
image: images.table1,
x: 280,
y: 30
});
var table3 = new Kinetic.Image({
image: images.table3,
x: 500,
y: 30
});
var table4 = new Kinetic.Image({
image: images.table4,
x: 50,
y: 500
});
var table5 = new Kinetic.Image({
image: images.table5,
x: 200,
y: 400
});
table2.on('click', function () {
writeMessage('mouseover monkey');
});
table1.on('click', function () {
writeMessage('mouseover lion');
});
table3.on('click', function () {
writeMessage('mouseover lion');
});
table4.on('click', function () {
writeMessage('mouseover lion');
});
table5.on('click', function () {
writeMessage('mouseover lion');
});
layer.add(table2);
layer.add(table1);
layer.add(table3);
layer.add(table4);
layer.add(table5);
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
table1.cache();
// next, we need to redraw the hit graph using the cached image
table1.drawHitFromCache();
// 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'
});
<?php
?>
var sources = {
table1: 'house204-2.jpg',
table2: 'house204-2.jpg',
table3: 'house204-1.jpg',
table4: 'house204-1.jpg',
table5: 'house204-1.jpg'
};
loadImages(sources, buildStage);
</script>
</body>
</html>
right now i am giving hard code values in sources. And x,y co-ordinates are also static right now. Help me to create array which will dynamically take values from database and we can send this array (values) to sources.
And i am using tablePosition[[],[],[]] array to store id,x,y co-ordinates of each table.
For each image, create a javascript object containing the image url and its x,y position and push those objects into an array.
var images=[];
images.push({x:10,y:20,url:{'myImage1.png'});
images.push({x:10,y:20,url:{'myImage2.png'});
Then turn that array into a string using JSON.stringify and save that string to your database.
var imageDefinitions = JSON.stringify(images);
// now push the imageDefinitions string into your database (maybe use AJAX)
jquery.post(...url to post the imageDefinitions string...);
When you want to recreate your scene by drawing the images, fetch the imageDefinitions from your database and recreate the images array using JSON.parse.
// now pull the imageDefinitions from your database (maybe use AJAX)
var imageDefinitions=jQuery.get(...url to GET the imageDefinitions string...);
var images=JSON.parse(imageDefinitions);
And use this array to create your new Image() objects and then create your Kinetic objects.