kineticjs 이미지를 dom에서 캔버스로 끌어 놓습니다.

Question

dom에 이미 이미지가로드되어 있으며 해당 이미지를 캔버스로 드래그하여 캔버스에 놓고 그 안에 kineticjs 개체를 만들 수 있기를 원합니다.

이미지를 드래그 할 수있는 방법을 모르겠다. 이미 캔버스가 DOM에 이미있는 이벤트를 끌어서 놓는 방법에 대해 어떻게 반응하는지 알지 못한다. 누군가 이걸하는 방법을 보여줄 수 있습니까?

자습서의 대부분은 캔버스 또는 파일 시스템에서 끌어서 놓기 방법을 보여 주므로 DOM에서 캔버스로 끌는 방법을 찾고 있습니다.

배경 정보 : 사용자가 사진을 펼치기 위해 캔버스에 드래그 앤 드롭 할 수있는 메뉴 시스템 또는 미리보기 이미지 모음이 필요합니다.

미리 감사드립니다.

Answer 1

문제가 없습니다.

1 html5에서 "끌어서 놓기"를 사용해야합니다. 자습서 : 컨테이너 개체에 대한

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://www.html5rocks.com/en/tutorials/dnd/basics/

이 설정 DOM 이벤트 http://jsfiddle.net/lavrton/n4w44/

드래그 할 수