Javascript 拖放多个图像kineticjs
我正在尝试将多个图像拖放到画布中，它们可以移动到画布中。它只对一个有效，但在进行倍数运算时，最后一个会替换所有其他的 代码如下：Javascript 拖放多个图像kineticjs,javascript,canvas,drag-and-drop,kineticjs,Javascript,Canvas,Drag And Drop,Kineticjs,我正在尝试将多个图像拖放到画布中，它们可以移动到画布中。它只对一个有效，但在进行倍数运算时，最后一个会替换所有其他的 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas - test</title> <style> canvas { position: relative; bord
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas - test</title>
<style>
canvas {
position: relative;
border: 1px solid #000;
}
</style>
<script src="./kinetic-v4.3.2.js"></script>
<!--[if lte IE 8]>
<script src="../js/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<header role="banner">
<h1>Canvas - The Cure</h1>
</header>
<div role="main">
<section id="main-content">
<canvas id="my-canvas" width="700" height="600">I am canvas</canvas>
<script>
(function () {
var nbimg=0;
var imgs=[];
//ajout de kinetic
var stage = new Kinetic.Stage({
container: 'container',
width: 700,
height: 600
});
var layer = new Kinetic.Layer();
stage.add(layer);
var canvas = document.getElementById("my-canvas"),
context = canvas.getContext("2d"),
img = document.createElement("img"),
mouseDown = false,
brushColor = "rgb(0, 0, 0)",
hasText = true,
clearCanvas = function () {
if (hasText) {
context.clearRect(0, 0, canvas.width, canvas.height);
hasText = false;
}
};
// Adding instructions
context.fillText("Drop an image onto the canvas", 240, 200);
context.fillText("Click a spot to set as brush color", 240, 220);
// Image for loading
img.addEventListener("load", function () {
//delete text and show image
clearCanvas();
context.drawImage(img, 0, 0);
}, false);
function show(){
// the imgs[] array holds fully loaded images
layer.clear();
// make each image into a draggable Kinetic.Image
for(var i=0;i<=nbimg;i++){
var img=new Kinetic.Image({
x:i*75+15,
y:i*75+15,
width:60,
height:60,
image:imgs[i],
draggable:true
});
layer.add(img);
}
layer.draw();
}
// To enable drag and drop
canvas.addEventListener("dragover", function (evt) {
evt.preventDefault();
}, false);
// Handle dropped image file - only Firefox and Google Chrome
canvas.addEventListener("drop", function (evt) {
var files = evt.dataTransfer.files;
if (files.length > 0) {
var file = files[0];
if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
var reader = new FileReader();
// Note: addEventListener doesn't work in Google Chrome for this event
reader.onload = function (evt) {
img.src = evt.target.result;
imgs[nbimg]=img;
nbimg++;
show();
};
reader.readAsDataURL(file);
}
}
evt.preventDefault();
}, false);
// Save image
var saveImage = document.createElement("button");
saveImage.innerHTML = "Save canvas";
saveImage.addEventListener("click", function (evt) {
window.open(canvas.toDataURL("image/png"));
evt.preventDefault();
}, false);
document.getElementById("main-content").appendChild(saveImage);
})();
</script>
</section>
</div>
</div>
</body>
</html>
画布测试
帆布{
位置：相对位置；
边框：1px实心#000；
}
帆布-治愈
我是帆布
（功能（）{
var nbimg=0；
var-imgs=[]；
//阿约特动力学酒店
var阶段=新的动力学阶段({
容器：'容器'，
宽度：700，
身高：600
});
var layer=新的动能层（）；
阶段。添加（层）；
var canvas=document.getElementById（“我的画布”），
context=canvas.getContext（“2d”），
img=document.createElement（“img”），
mouseDown=false，
brushColor=“rgb（0,0,0）”，
hasText=true，
clearCanvas=函数（）{
if（hasText）{
clearRect（0，0，canvas.width，canvas.height）；
hasText=false；
}
};
//添加说明
fillText（“将图像放到画布上”，240200）；
fillText（“单击一个点以设置为笔刷颜色”，240，220）；
//加载图像
img.addEventListener（“加载”，函数（）{
//删除文本并显示图像
clearCanvas（）；
drawImage（img，0,0）；
}，假）；
函数show（）{
//imgs[]数组保存完全加载的图像
层。清除（）；
//将每个图像制作成可拖动的动态图像
对于（变量i=0；i 0）{
var file=files[0]；
if（typeof FileReader！=“未定义”&&file.type.indexOf（“图像”）！=-1）{
var reader=new FileReader（）；
//注意：addEventListener在Google Chrome中不适用于此事件
reader.onload=函数（evt）{
img.src=evt.target.result；
imgs[nbimg]=img；
nbimg++；
show（）；
};
reader.readAsDataURL（文件）；
}
}
evt.preventDefault（）；
}，假）；
//保存图像
var saveImage=document.createElement（“按钮”）；
saveImage.innerHTML=“保存画布”；
saveImage.addEventListener（“单击”，函数（evt）{
open（canvas.toDataURL（“image/png”）；
evt.preventDefault（）；
}，假）；
document.getElementById（“主要内容”）.appendChild（saveImage）；
})();