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

Question

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

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

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

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

提前致谢！

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