Replacing image in HTML5 canvas using kinetic.js?
Question
Hey guys I'm trying to replace the image loaded on the html5 canvas on click of the next image in the same list.. Like I have two lists of images using different functions to get onto the canvas.. Now what I want is to replace the first uploaded pic on clicking of the next image.. same goes for the other list.. Please help me out thanks..
<script src="kinetic-v1.js">
</script>
<script>
function drawImage(imageObj){
var stage = new Kinetic.Stage("container", 578, 500);
var layer = new Kinetic.Layer();
var x = stage.width / 2 - 200 / 2;
var y = stage.height / 2 - 137 / 2;
var width = 200;
var height = 137;
// darth vader
var darthVaderImg = new Kinetic.Shape(function(){
var context = this.getContext();
context.drawImage(imageObj, x, y, width, height);
// draw invisible detectable path for image
context.beginPath();
context.rect(x, y, width, height);
context.closePath();
});
// enable drag and drop
darthVaderImg.draggable(true);
// add cursor styling
darthVaderImg.on("mouseover", function(){
document.body.style.cursor = "pointer";
});
darthVaderImg.on("mouseout", function(){
document.body.style.cursor = "default";
});
//remove image on double click
darthVaderImg.on("dblclick dbltap", function(){
layer.remove(darthVaderImg);
layer.draw();
});
layer.add(darthVaderImg);
stage.add(layer);
}
function drawImage2(imageObj){
var stage = new Kinetic.Stage("container", 578, 500);
var layer = new Kinetic.Layer();
var x = stage.width / 2 - 100 ;
var y = stage.height / 2 - 137 ;
var width = 200;
var height = 137;
// darth vader
var darthVaderImg2 = new Kinetic.Shape(function(){
var context = this.getContext();
context.drawImage(imageObj, x, y, width, height);
// draw invisible detectable path for image
context.beginPath();
context.rect(x, y, width, height);
context.closePath();
});
// enable drag and drop
darthVaderImg2.draggable(true);
// add cursor styling
darthVaderImg2.on("mouseover", function(){
document.body.style.cursor = "pointer";
});
darthVaderImg2.on("mouseout", function(){
document.body.style.cursor = "default";
});
//remove image on double click
darthVaderImg2.on("dblclick dbltap", function(){
layer.remove(darthVaderImg2);
layer.draw();
});
layer.add(darthVaderImg2);
stage.add(layer);
}
function load(img){
// load image
var imageObj = new Image();
imageObj.onload = function(){
drawImage(this);
};
imageObj.src = img.src;
};
function load2(img){
// load image
var imageObj = new Image();
imageObj.onload = function(){
drawImage2(this);
};
imageObj.src = img.src;
};
</script>
<title>HTMl5 drag drop multiple elements</title></head>
<body onmousedown="return false;">
<div id="container">
</div>
<ul id="img"> <li><a href="#" onclick="load(document.getElementById('i1'))">
<img src="dog.png" id="i1" alt="doggie" width="60" height="55"/>
</a></li>
<li>
<a href="#" onclick="load(document.getElementById('i2'))">
<img src="dog2.png" id="i2" alt="Pulpit rock" width="60" height="55" /></a>
</li>
</ul>
<ul id="img1">
<li><a href="#" onclick="load2(document.getElementById('i4'))">
<img alt="doggie" src="beach.png" id="i4" width="60" height="55" />
</a></li>
<li><a href="#" onclick="load2(document.getElementById('i5'))">
<img alt="doggie" src="cat3.png" id="i5" width="60" height="55" /></a></li>
</ul>
</body>
</html>
1 answers
solution1
0 ACCPTED 2012-02-29 08:19:23
Here..I just updated the kineticJs library and used an extra tag .. by courtesy of a friend berry
<script src="kinetic-v3.8.0.min.js">
</script>
<script>
var stage = null;
var groups = {
dog: null,
bla: null
}
function setupStage() {
stage = new Kinetic.Stage("container", 578, 500);
};
function drawImageOnLayer(layer, img) {
var x = stage.width / 2 - 100 ;
var y = stage.height / 2 - 137 ;
var width = 200;
var height = 137;
var kinecticImg = new Kinetic.Shape(function(){
var context = this.getContext();
context.drawImage(img, x, y, width, height);
// draw invisible detectable path for image
context.beginPath();
context.rect(x, y, width, height);
context.closePath();
});
// enable drag and drop
kinecticImg.draggable(true);
layer.clear();
layer.add(kinecticImg);
layer.draw();
}
function drawImageOnLayer2(layer, img) {
var x = stage.width / 2 - 300 ;
var y = stage.height / 2 - 237 ;
var width = 200;
var height = 137;
var kinecticImg = new Kinetic.Shape(function(){
var context = this.getContext();
context.drawImage(img, x, y, width, height);
// draw invisible detectable path for image
context.beginPath();
context.rect(x, y, width, height);
context.closePath();
});
// enable drag and drop
kinecticImg.draggable(true);
layer.clear();
layer.add(kinecticImg);
layer.draw();
}
function loadWithType(type, img) {
if (groups[type]) {
stage.remove(groups[type]);
}
groups[type] = new Kinetic.Layer();
stage.add(groups[type]);
drawImageOnLayer(groups[type], img);
};
function loadWithType2(type, img) {
if (groups[type]) {
stage.remove(groups[type]);
}
groups[type] = new Kinetic.Layer();
stage.add(groups[type]);
drawImageOnLayer2(groups[type], img);
};
</script>
<title>HTMl5 drag drop multiple elements</title></head>
<body onload="setupStage();" onmousedown="return false;">
<div id="container">
</div>
<ul id="img"> <li><a href="#"onclick="loadWithType
('dog',document.getElementById('i1'))">
<img src="dog.png" id="i1" alt="doggie" width="60" height="55"/>
</a></li>
<li>
<a href="#" onclick="loadWithType('dog', document.getElementById('i2'))">
<img src="dog2.png" id="i2" alt="Pulpit rock" width="60" height="55" /></a>
</li>
</ul>
<ul id="img1">
<li><a href="#" onclick="loadWithType2('bla', document.getElementById('i4'))">
<img alt="doggie" src="beach.png" id="i4" width="60" height="55" />
</a></li>
<li><a href="#" onclick="loadWithType2('bla', document.getElementById('i5'))">
<img alt="doggie" src="cat3.png" id="i5" width="60" height="55" /></a></li>
</ul>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Replacing text over an Image using Kinetic.js html5 canvas
Smooth animations in kinetic.js (html5 canvas)
HTML5 Kinetic.js : Draggable bound just for the canvas size
HTML5 Canvas how to make image can resizable by Kinetic.js?
How to crop an image with canvas and Kinetic.js
Dynamically created HTML5 canvas element in Kinetic.js fails with draggable:true
kinetic.js html5 “animals on beach” example
Kinetic.js Can't Load image onto canvas
Set HTML input value using Kinetic.js
Kinetic.JS Image Unable to Drag After Using Pixel Detection
Related Tags