我已经在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/
原文地址:https://www.jb51.cc/html/242551.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。