kineticjs将图像从dom拖放到画布中 [英] kineticjs drag and drop image from dom into canvas

问题描述

我已经有一个加载在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 
}）; 
 //将图像插入到
 con.addEventListener（'drop'，function（e）{
 var image = new Kinetic.Image（{
 draggable：true 
 
 image.bb（。 
 image.setImage（imageObj）
 layer.draw（）
}; 
}）; 
  

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

I have an image loaded on the dom already, and I want to be able to drag that image into a canvas and drop it into the canvas and create a kineticjs object out of it.

I don't know how to make the image draggable, and I don't know how to make the canvas react to drag and drop events that already exist on the dom. Can someone show me how to do this?

Most of the tutorials show how to drag and drop from within the canvas, or the file system, I'm looking how to drag from the DOM to the canvas.

Background info: I want to have a menu system or a bunch of thumbnails that a user can drag and drop into the canvas to expand the photo.

Thanks in advance!

解决方案

No problem!

1 You have to use "drag and drop" from html5. Tutorial: http://www.html5rocks.com/en/tutorials/dnd/basics/

2 setup dom event to image:

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

3 Events for container object:

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()
    };
 });

And of course full example: http://jsfiddle.net/lavrton/n4w44/

这篇关于kineticjs将图像从dom拖放到画布中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！