我已经在 dom 上加载了一个图像,我希望能够将该图像拖入 Canvas 并将其放入 Canvas 并从中创建一个 kineticjs 对象。
我不知道如何使图像可拖动,也不知道如何使 Canvas 对 dom 上已经存在的拖放事件使用react。有人可以告诉我如何做到这一点吗?
大多数教程都展示了如何从 Canvas 或文件系统中拖放,我正在研究如何从 DOM 拖放到 Canvas 。
背景资料:
我想要一个菜单系统或一堆缩略图,用户可以将其拖放到 Canvas 中以展开照片。
提前致谢!
最佳答案
没问题!
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/
关于drag-and-drop - kineticjs 将图像从 dom 拖放到 Canvas 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16271450/