I am using the below code to create a dragable image, i want to be able to create multiple individual dragable versions of the image depending on a variable, each image independently dragable onto the conatiner. Is this possible if so how?
<html>
<head>
<style>
body {
margin: 5px;
padding: 5px;
}
#container {
background-color: #336600;
width: 400px;
height: 600px;
</style>
<script src="
http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/v4.2.0/kinetic-v4.2.0.js"></script>
</head>
<body>
<div id="container"></div>
<script src="
http://www.html5canvastutorials.com/libraries/kinetic-v4.2.0.js"></script>
<script>
function drawImage(imageObj) {
var stage = new Kinetic.Stage({
container: "container",
width: 500,
height: 600
});
var layer = new Kinetic.Layer();
// darth vader
var PlayerImg = new Kinetic.Image({
image: imageObj,
x: 445, //stage.getWidth() / 2 - 200 / 2,
y: 5, // stage.getHeight() / 2 - 137 / 2,
width: 50,
height: 75,
draggable: true
});
// add cursor styling
PlayerImg.on('mouseover', function() {
document.body.style.cursor
= 'pointer';
});
PlayerImg.on('mouseout', function() {
document.body.style.cursor
= 'default';
});
layer.add(PlayerImg);
stage.add(layer);
}
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'images/Player.JPG';
</script>
</body>
</html>
It definitely sounds like you can do that with kinetic. I have noticed working with the kinetic library though that you have to do things in a way that may be a little counter-intuitive, but they have great examples of how to do a lot of things on their website.
You should just need to add a loop to that script. And move the stage and layer items out of the function and make them global to the page (you don't want separate stages for each image, though I guess it is possible you want multiple layers)
So you create the stage and the layer, then you loop the creation of your images and make sure to draw the layer each time you add something to it, unless they changed something, it didn't used to automatically redraw.
new code
Open in new window
I tested the above and it works. I am running the stage creation on the window.load even so that we ensure that the html element with id of "container" is loaded.