javascript - Drag and drop multiple images kineticjs -
i trying drag , drop multiple images canvas , can moved canvas. works one, when doing multiples, last 1 replaces others.
this code:
<!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 - cure</h1> </header> <div role="main"> <section id="main-content"> <canvas id="my-canvas" width="700" height="600">i 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 image onto canvas", 240, 200); context.filltext("click spot set brush color", 240, 220); // image loading img.addeventlistener("load", function () { //delete text , show image clearcanvas(); context.drawimage(img, 0, 0); }, false); function show(){ // imgs[] array holds loaded images layer.clear(); // make each image 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(); } // enable drag , drop canvas.addeventlistener("dragover", function (evt) { evt.preventdefault(); }, false); // handle dropped image file - firefox , 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 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> any idea problem is?
Comments
Post a Comment