Question

我正在尝试将多个图像拖放到画布中，然后将它们移动到画布中。它适用于一个，但是当做多个时，最后一个替换所有其他的。

这是代码：

<!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>

知道问题出在哪里？

拖放多个图像kineticjs

0 个答案: