拖放 – kineticjs将图像从dom拖放到画布中

发布时间：2020-12-14 22:32:48 所属栏目：资源来源：网络整理

导读：我已经在dom上加载了一个图像,我希望能够将该图像拖动到画布中并将其放入画布并从中创建一个kineticjs对象. 我不知道如何使图像可拖动,我不知道如何使画布对拖放已存在于dom上的事件做出反应.有人能告诉我怎么做吗？大多数教程都展示了如何从画布或文件系统

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

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

大多数教程都展示了如何从画布或文件系统中拖放,我正在寻找如何从DOM拖动到画布.

背景资料：
我想要一个菜单??系统或一堆缩略图,用户可以拖放到画布中以展开照片.

提前致谢！

解决方法

没问题！

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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!