Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users
Course Of The Month
4 days, 20 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
HTML5 + Mulitple Dragable Images
Posted on 2013-01-02
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>
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
4-
4
8 Comments
Hi,
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
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.
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
<script>
var stage = null;
var layer = null;
function drawImage(imageObj) {
// 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);
layer.draw();
}
window.onload = function()
{
var x = 5; //you could set this to whatever number of images you want
stage = new Kinetic.Stage({
container: "container",
width: 500,
height: 600
});
layer = new Kinetic.Layer();
stage.add(layer);
var imageObjs = Array();
for(var i = 0;i<x;i++)
{
imageObjs.push(new Image());
imageObjs[i].onload= function() {
drawImage(this);
};
imageObjs[i].src = 'images/Player.JPG';
}
}
</script>
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.
is there a way to have the images line up vertically, so they are not all on top of each other? so the first one is position y of 5, the next one when added would be y + the height of theimage.
thanks
thanks
well, you could update the drawImage function to accept an x and y parameter and then pass them to the function when you draw them...
you could determine the ypos by giving the index of the loop as the alt tag of the image and then calculate in the onload function.
you could determine the ypos by giving the index of the loop as the alt tag of the image and then calculate in the onload function.
<script>
var stage = null;
var layer = null;
var i = 0;
function drawImage(imageObj,xpos,ypos) {
// darth vader
var PlayerImg = new Kinetic.Image({
image: imageObj,
x: xpos, //stage.getWidth() / 2 - 200 / 2,
y: ypos, // 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);
layer.draw();
}
window.onload = function()
{
var x = 5; //you could set this to whatever number of images you want
stage = new Kinetic.Stage({
container: "container",
width: 500,
height: 600
});
layer = new Kinetic.Layer();
stage.add(layer);
var imageObjs = Array();
for(i = 0;i<x;i++)
{
imageObjs.push(new Image());
imageObjs[i].alt = i;
imageObjs[i].onload= function() {
drawImage(this,450,5 + this.height * parseInt(this.alt));
};
imageObjs[i].src = 'images/Player.JPG';
}
}
</script>
Only the 1st and last image show up with this code, there is space inbetween that looks about the same distance as the other 3 images, but only 2 show up.
hmm, they all showed up for me...
try adding in stage.draw(); after the for loop.
you can see my example here:
http://bit.ly/UmVSVG
try adding in stage.draw(); after the for loop.
you can see my example here:
http://bit.ly/UmVSVG
definitely works for you, i copied your code exactly from your page and only get 2 images. I stepped through and it seems on my machine this line is creating higher numbers.
drawImage(this,450,5 + this.height * parseInt(this.alt));
the parseInt(this.alt) is 0,1,2,3,4 - so 5 + 75 * 0,1,2,3, or 4 is creating high numbers which then have the other 3 images off the screen
drawImage(this,450,5 + this.height * parseInt(this.alt));
the parseInt(this.alt) is 0,1,2,3,4 - so 5 + 75 * 0,1,2,3, or 4 is creating high numbers which then have the other 3 images off the screen
Featured Post
You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…
- Document Management
- Document Imaging
- Programming
- Adobe Acrobat
- Scripting Languages
- Printers and Scanners, OCR, *Scripts, *PDF, *text file
Suggested Courses
Course of the Month4 days, 20 hours left to enroll
688 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.