双击从画布中删除图像

时间:2014-07-30 06:03:26

标签: javascript jquery canvas drag-and-drop kineticjs

我将图像从工具栏拖动并下垂到画布上然后在画布中移动它。目前我可以从工具栏中多次将单个图像加载到画布上,如下面的链接所示

http://jsfiddle.net/gkefk/22/

当用户双击该特定图像时,我想添加从画布中删除图像的特定副本的功能。为此,我在双击时触发jQuery事件。

$("#image").dblclick(function(){
layer.remove();
});

即使我双击特定副本的图像,该特定副本也没有从画布中删除。我无法理解我做错了什么..请帮助

包含jQuery事件的小提琴的链接

http://jsfiddle.net/gkefk/23/

1 个答案:

答案 0 :(得分:1)

更新了您的小提琴以使其正常工作:

image.on('dblclick', function() {
    image.remove();
    layer.draw();
});

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

你必须为每个图像副本添加一个事件处理程序,而不是信任jQuery来动态地执行此操作。

你的jQuery调用在文档加载时完成一次(而没有id为“image”的元素存在)并且之后没有效果。另请注意,在多个动态元素上使用静态ID并不是一个好主意,因为ID必须是唯一的。