What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI
COURSE of the MONTH
12 days, 13 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
The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.
One of a set of tools we're offering as a way of saying thank you for being a part of the community.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors.
Create your external css file by saving it as style.css then set up your style tags:
(CODE)
Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing.
Set up your basic HTML file. Open your form tag and set the method and action attributes.:
(CODE)
Set up your first few inputs one for the name and …
Suggested Courses
Course of the Month12 days, 13 hours left to enroll
777 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.