拖动&将多个图像从工具栏拖放到画布上 [英] Drag & Drop Multiple Images from Toolbar onto Canvas

问题描述

我正在创建一个应用程序，用户可以拖动&将多个对象从工具栏拖放到画布上。将特定对象拖放到画布上之后，用户可以在画布中移动该对象。双击该对象将使其消失。我已经能够实现一个对象

I am making an application in which user can drag & drop multiple objects from a toolbar onto a canvas.After dragging and dropping that particular object onto the canvas the user can move that object around in the canvas.Double Clicking on that object will make it disappear.I have been able to implement this for one object in the toolbar as shown in the link below..

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

要拖动&从工具栏中删除多个对象我在函数DragDrop（）中添加了以下内容

To drag & drop multiple objects from the toolbar I made the following additions in the function 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/

The Fiddle containing the above code is http://jsfiddle.net/gkefk/29/

即使我已进行必要的添加在DragDrop（）函数中，这两个新对象在工具栏中可见，但我无法像第一个对象一样拖动，放置，移动和删除它们。请帮助...

Even though I've made the necessary additions in the DragDrop() function, the two new objects are visible in the toolbar but i'm not being able to drag,drop,move around and delete them like the first object.Please Help...

推荐答案

我做了一些重大的改变：

I made it work with some major changes:

数组 - 所以你可以在代码中的一个地方扩展它：

The image sources are provided in a dynamic array - so you can extend this at one single place in your code:

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）

(of course you also have to update your HTML with the toolbar accordingly)

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

The list of images gets processed in a loop and for each element a new draggable object is created in connection with the corresponding <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的计数器只与下拉时创建的新元素相关。由于您只能同时投放一个图片，因此您还必须只创建一个新图片（），而不是尝试创建三个图片。

The counter for IDs is only relevant to the new element that is created on drop. As you only drop one image at the same time you also have to create a single new Image() only, instead of trying to create three of them.

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

Your working example can be found here and is extensible: http://jsfiddle.net/gkefk/32/

这篇关于拖动&将多个图像从工具栏拖放到画布上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！