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

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

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(); 

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

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

Answer 1

我做了一些重大改变：

图像源以动态数组的forms提供 – 因此您可以在代码中的单个位置扩展它：

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

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

图像列表在循环中处理，并且对于每个元素，创建与对应的的新的可拖动对象：

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