Question

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

拖动＆amp;从工具栏中删除多个对象我在函数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();

包含上述代码的小提琴是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的计数器仅与drop上创建的新元素相关。由于您只是同时删除一个图像，因此您还必须创建一个new Image()，而不是尝试创建其中三个。

您的工作示例可在此处找到并且可扩展：http://jsfiddle.net/gkefk/32/

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

1 个答案: