使用dynamic.js替换HTML5画布中的图像？
[英]Replacing image in HTML5 canvas using kinetic.js?
问题描述
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.. 
大家好，我要在单击同一列表中的下一张图像时替换html5画布上加载的图像。就像我有两个使用不同功能的图像列表进入画布一样。现在我要的是单击下一张图片，替换第一张上传的图片。.其他列表也一样。.请帮助我，谢谢..
<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 个解决方案
解决方案1
0 已采纳 2012-02-29 08:19:23
Here..I just updated the kineticJs library and used an extra tag .. by courtesy of a friend berry 在这里..我刚刚更新了dynamicJs库，并使用了一个额外的标签..
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用Kinetic.js html5画布替换图像上的文本 - Replacing text over an Image using Kinetic.js html5 canvas
dynamic.js（html5 canvas）中的平滑动画 - Smooth animations in kinetic.js (html5 canvas)
HTML5 Kinetic.js：仅适用于画布大小的可拖动绑定 - HTML5 Kinetic.js : Draggable bound just for the canvas size
HTML5 Canvas如何使Kinetic.js可以调整图像大小？ - HTML5 Canvas how to make image can resizable by Kinetic.js?
如何使用canvas和Kinetic.js裁剪图像 - How to crop an image with canvas and Kinetic.js
在Kinetic.js中动态创建的HTML5 canvas元素失败，并出现draggable：true - Dynamically created HTML5 canvas element in Kinetic.js fails with draggable:true
etic.js html5“海滩上的动物”示例 - kinetic.js html5 “animals on beach” example
Kinetic.js无法将图像加载到画布上 - Kinetic.js Can't Load image onto canvas
使用Kinetic.js设置HTML输入值 - Set HTML input value using Kinetic.js
Kinetic.JS图像在使用像素检测后无法拖动 - Kinetic.JS Image Unable to Drag After Using Pixel Detection
相关标签