将多个图像从工具栏拖放到画布上

Question

我正在制作一个应用程序，用户可以在其中将多个对象从工具栏拖放到画布上。将特定对象拖放到画布上后，用户可以在画布中移动该对象。双击该对象将使它消失。我已经能够为工具栏中的一个对象实现这一点，如下面的链接所示..

http://jsfiddle.net/gkefk/26/

为了从工具栏中拖放多个对象，我在函数 DragDrop() 中添加了以下内容

   var image2 = new Kinetic.Image({
    name: data,
    id: "image"+(imageCount++),
    x: x,
    y: y,
    image2: theImage2,
    draggable: true
});
image2.on('dblclick', function() {
    image2.remove();
    layer.draw();
});
layer.add(image2);
layer.draw();

 var image3 = new Kinetic.Image({
    name: data,
    id: "image"+(imageCount++),
    x: x,
    y: y,
    image3: theImage3,
    draggable: true
});
image3.on('dblclick', function() {
    image3.remove();
    layer.draw();
});
layer.add(image3);
layer.draw();

包含上述代码的Fiddle是http://jsfiddle.net/gkefk/29/

即使我在 DragDrop() 函数中进行了必要的添加，这两个新对象在工具栏中仍然可见，但我无法像第一个对象那样拖放、移动和删除它们。请帮忙...

Answer 1

我对其进行了一些重大更改：

图像源以动态数组的形式提供 - 因此您可以在代码中的一个位置对其进行扩展：

var imageSrc = [
    "http://t2.gstatic.com/images?q=tbn:ANd9GcQ5fOr5ro_dK6D9UmSsVn0Z9m1QQMqRwr0z1tP_BzEGr7GuTrgeZQ",
    "http://sandbox.kendsnyder.com/IM/square-stripped.png",
    "http://t3.gstatic.com/images?q=tbn:ANd9GcRBYkAv40Eeaxlze2dqhayvKUeoUH6l_jYNLlsfjzJu0Uy9ucjcNA"
];

（当然您还必须相应地使用工具栏更新您的 HTML）

图像列表在循环中得到处理，并为每个元素创建一个新的可拖动对象，并与相应的<img id = "..." />相关联：

//loop through imageSrc list
for (var i = 0; i  < imageSrc.length; i++) {
    //use a closure to keep references clean
    (function() {
        var $house, image;
        var $house = $("#house"+i);
        $house.hide();
        image = new Image();
        image.onload = function () {
            $house.show();
        }
        image.src = imageSrc[i];
        // start loading the image used in the draggable toolbar element
        // this image will be used in a new Kinetic.Image
        // make the toolbar image draggable
        $house.draggable({helper: 'clone'});
        $house.data("url", "house.png"); // key-value pair
        $house.data("width", "32"); // key-value pair
        $house.data("height", "33"); // key-value pair
        $house.data("image", image); // key-value pair
    })();
}

ID 计数器仅与放置时创建的新元素相关。由于您同时只删除了一张图片，因此您还必须只创建一个 new Image()，而不是尝试创建三个。

您的工作示例可以在这里找到并且是可扩展的：http://jsfiddle.net/gkefk/32/