kineticjs를 사용하여 드래그 앤 드롭 캔버스 객체 만들기

Question

툴바에 여러 개의 캔버스 객체가 있습니다. fiddle 같은 캔버스 객체에 드래그 앤 드롭 기능을 추가하고 싶습니다. 내가 어떻게 할 수 있니?

JS 코드

$(function(){ 
    var stage = new Kinetic.Stage({ 
     container: 'toolbar', 
     width: 350px, 
     height: 350px 
    }); 
    var layer = new Kinetic.Layer(); 
    stage.add(layer); 
    var line = new Kinetic.Shape({ 
     x:0, 
     y:0, 
     stroke:"blue", 
     fill: 'black', 
     drawFunc: function(context) { 
     context.beginPath(); 
     context.moveTo(20,5); 
     context.quadraticCurveTo(10, 35, 20, 60); 
     context.moveTo(20,5); 
     context.quadraticCurveTo(30, 35, 20, 60); 
     context.fillStrokeShape(this); 
     } 
    }); 
    var line2 = new Kinetic.Rect({ 
     x: 60, 
     y: 8, 
     width: 40, 
     height: 40, 
     fill: "red",   
    });  
    layer.add(line); 
    layer.add(line2); 
    layer.draw(); 
}); 

Answer 1

캔버스 내용은 캔버스 요소를 끌 수 없습니다.

상단 툴바가 캔버스 모양을 포함하는 캔버스 인 경우 해당 모양을 툴바에서 두 번째 캔버스 아래로 끌 수 없습니다.

몇 가지 해결 방법 :

1. 대신 도구 모음 DIV와 캔버스 DROPZONE를 사용, 도구 모음 및 드롭 존 모두를 그립니다 1 캔버스를합니다. 그렇게하면 캔바스 상단 (툴바가있는 곳)에서 캔버스의 하단 (드롭 존이있는 곳)까지 컨텐츠를 드래그 할 수 있습니다.

2. 각 도형을 이미지로 변환하십시오. 다음과 같이 수행 할 수 있습니다.

   • 캔버스 요소에 드로잉 1 모양.
   • context.getDataURL을 사용하여 캔버스의 dataURL을 가져옵니다.
   • dataURL을 소스로 사용하여 새 Image() 객체를 만듭니다.
   • 새로 만든 모양 이미지를 툴바에 넣습니다.
   • 다른 모양 각각에 대해 반복하십시오.

프로젝트가 성공적으로 완료되었습니다.