使用dynamic.js替换HTML5画布中的图像？
[英]Replacing image in HTML5 canvas using kinetic.js?
问题描述
大家好，我要在单击同一列表中的下一张图像时替换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
在这里..我刚刚更新了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>
在Kinetic.js中动态创建的HTML5 canvas元素失败，并出现draggable：true
[英]Dynamically created HTML5 canvas element in Kinetic.js fails with draggable:true
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用Kinetic.js html5画布替换图像上的文本
dynamic.js（html5 canvas）中的平滑动画
HTML5 Kinetic.js：仅适用于画布大小的可拖动绑定
HTML5 Canvas如何使Kinetic.js可以调整图像大小？
如何使用canvas和Kinetic.js裁剪图像
在Kinetic.js中动态创建的HTML5 canvas元素失败，并出现draggable：true
etic.js html5“海滩上的动物”示例
Kinetic.js无法将图像加载到画布上
使用Kinetic.js设置HTML输入值
Kinetic.JS图像在使用像素检测后无法拖动
相关标签