javascript - 使用触摸屏将图像拖放到 HTML5 上

Question

我有一个可以正常工作的脚本，显示图像，您可以拖放该图像。但我的问题是:如何添加更多图像？如果我复制相同的代码，它不会显示两个图像。

<script src="http://d3lp1msu2r81b...c-v5.0.2.min.js"></script>
<script defer="defer">
    function drawImage(imageObj) { 
        var stage = new Kinetic.Stage({
            container: "container",
            width: 800,
            height: 600
        });
        var layer = new Kinetic.Layer();

        // darth vader
        var darthVaderImg = new Kinetic.Image({
            image: imageObj,
            x: 100,
            y: 30,
            width: 40,
            height: 40,
            draggable: true
        });

        // add cursor styling
        darthVaderImg.on('mouseover', function() {
            document.body.style.cursor = 'pointer';
        });
        darthVaderImg.on('mouseout', function() {
            document.body.style.cursor = 'default';
        });

        layer.add(darthVaderImg);
        stage.add(layer);
    }

    var imageObj = new Image();
    imageObj.onload = function() {
        drawImage(this);
    };
    imageObj.src = 'adorno1.png';
</script>

Answer 1

function drawImage(imageObj) { 
    var stage = new Kinetic.Stage({
        container: "container",
        width: 800,
        height: 600
    });
    var layer = new Kinetic.Layer();

    // darth vader
    var darthVaderImg = new Kinetic.Image({
        image: imageObj,
        x: 0,
        y: 0,
        width: 100,
        height: 100,
        draggable: true
    });

            var darthVaderImg1 = new Kinetic.Image({
        image: imageObj1,
        x: 100,
        y: 100,
        width:100,
        height: 100,
        draggable: true
    });

    // add cursor styling
    darthVaderImg.on('mouseover', function() {
        document.body.style.cursor = 'pointer';
    });
    darthVaderImg.on('mouseout', function() {
        document.body.style.cursor = 'default';
    });

    layer.add(darthVaderImg);
    layer.add(darthVaderImg1);
    stage.add(layer);
}


var imageObj = new Image();    

var imageObj1 = new Image();

imageObj.onload = function() {
    drawImage(this);
      };

imageObj1.onload = function() {
    drawImage(this);
      };

imageObj.src='http://i.forbesimg.com/media/lists/companies/google_416x416.jpg '; imageObj1.src='http://i.forbesimg.com/media/lists/companies/google_416x416.jpg ';

这是您问题的答案 http://jsfiddle.net/ajayholla/71qrotzz/5/