asked on
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
});
PlayerImg.on('mouseout', function() {
document.body.style.cursor
});
layer.add(PlayerImg);
stage.add(layer);
}
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'images/Player.JPG';
</script>
</body>
</html>
<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
});
PlayerImg.on('mouseout', function() {
document.body.style.cursor
});
layer.add(PlayerImg);
stage.add(layer);
}
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'images/Player.JPG';
</script>
</body>
</html>
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 8 Comments.
Try for 7 days”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.
Our community of experts have been thoroughly vetted for their expertise and industry experience.