动力学js将图像从dom拖放到画布中

Posted 2023-03-24

【中文标题】动力学js将图像从dom拖放到画布中

【英文标题】：kineticjs drag and drop image from dom into canvas

【发布时间】：2013-04-22 16:40:03

【问题描述】：

我已经在 dom 上加载了一个图像，我希望能够将该图像拖到画布中并将其拖放到画布中并从中创建一个 kineticjs 对象。

我不知道如何使图像可拖动，也不知道如何使画布对 dom 上已经存在的拖放事件做出反应。有人可以告诉我怎么做吗？

大部分教程都展示了如何从画布或文件系统中拖放，我正在研究如何从 DOM 拖放到画布。

背景信息： 我想要一个菜单​​系统或一堆缩略图，用户可以将它们拖放到画布中以展开照片。

提前致谢！

【问题讨论】：

您不能将元素从 DOM 拖放到 Canvas，因为拖放可以在 DOM 之间进行。 Canvas 不属于 DOM。您可以使用替代方法，例如通过 onload 事件或 click 事件。

嗯，你可以使用jquery来读取你想要创建动态图像对象的dom对象。您只需阅读图像属性即可获取来源。那么您需要在 jquery 中创建一些伪逻辑，以检测您何时将图像放在画布上。然后你可以在动力学里面创建图像对象。

【参考方案1】：

没问题！

1 您必须使用 html5 中的“拖放”。教程：http://www.html5rocks.com/en/tutorials/dnd/basics/

2 设置 dom 事件到图像：

var dragSrcEl = null;
//image
document.getElementById("yoda").addEventListener('dragstart',function(e)
       dragSrcEl = this;
);

容器对象的3个事件：

var con = stage.getContainer();        
con.addEventListener('dragover',function(e)
    e.preventDefault(); // !!important
);
//insert image to stage
con.addEventListener('drop',function(e)
    var image = new Kinetic.Image(
       draggable : true
    );
    layer.add(image);
    imageObj = new Image();
    imageObj.src = dragSrcEl.src;
    imageObj.onload = function()
        image.setImage(imageObj)
        layer.draw()
    ;
 );

当然还有完整的例子：http://jsfiddle.net/lavrton/n4w44/

【讨论】：

嗨拉夫顿，感谢您的回答！这或多或少是我正在寻找的，所以我会将其标记为正确，但我想知道如果我动态加载图像而不是预加载图像，你知道该怎么做吗？

@lavrton：您好，朋友。此链接在 Firefox 中无效。请帮助我，因为我在我的项目中使用了它。

我们可以添加分组吗？将图像放在一个组中并在拖放后将组拖到画布上？请问我需要一个答案

是的。你可以。新建Kinetic.Group。然后在 drop 事件上创建新的Kinetic.Image。

@lavrton 你知道如何改进你的演示，让它也能在触摸屏上运行吗？