2017-11-22 25 views
0

Konvajs 채팅 스트림에서 최근 누군가가 팔레트에서 Konvajs 라이브러리가 앞에있는 HTML5 캔버스로 끌어서 놓기의 예를 요청했습니다. 준비된 예제가 없었고이를 달성하는 방법에 대해 궁금했습니다.팔레트에서 Konvajs 스테이지로 도형 드래그

나는 코펜 던 (codepen)의 질문에 대답했지만, (내 자신의) 미래 참고 문헌을 위해 여기에 게시하기로 결정했다. 아래 내 대답을 참조하십시오.

답변

1

여기 jquery UI draggable & droppables를 사용하는 제 솔루션입니다. Konvajs는 jquery를 필요로하므로 jquery UI를 사용하는 것은 더 작은 단계에 불과합니다. 팔레트는 드래그 할 수있는 항목 당 하나의 모양이 그려진 작은 캔버스 요소 집합입니다. 팔레트는 모든 html 요소에 보관할 수 있으며 어떤 방식 으로든 메인 스테이지에 부착 할 필요가 없습니다.

// Set up the canvas to catch the dragged shapes 
 
var s1 = new Konva.Stage({container: 'container1', width: 500, height: 200}); 
 
// add a layer to host the 'dropped' shapes. 
 
var layer1 = new Konva.Layer({draggable: false}); 
 
s1.add(layer1); 
 

 
// set up the palette of draggable shapes - 5 sample shapes. 
 
var palletteEle = $('#pallette'); 
 
var d, ps, l, c; 
 
for (var i = 0; i<5; i = i + 1){ 
 
    // make a div to hold the shape 
 
    d = $('<div id="shape' + i + '" class="draggable">Shape</div>') 
 
    palletteEle.append(d) 
 

 
    // make a mini stage to hold the shape 
 
    ps = new Konva.Stage({container: 'shape' + i, width: 50, height: 50}); 
 

 
    // make a layer to hold the shape 
 
    l = new Konva.Layer(); 
 

 
    // add layer to palette 
 
    ps.add(l); 
 

 
    // make a shape - red circles for example 
 
    c = new Konva.Circle({x: 24, y: 24, radius: 22, fill: 'red', stroke: 'black'})  
 
    l.add(c); 
 
    ps.draw(); 
 
} 
 

 
// make a crosshair to give some idea of the drop location 
 
var cross = new Konva.Line({points: [10, 0, 10, 20, 10, 10, 0, 10, 20, 10], 
 
     stroke: 'gold', 
 
     strokeWidth: 1, 
 
     lineCap: 'round', 
 
     lineJoin: 'round'}) 
 
layer1.add(cross); 
 
//s1.draw(); 
 

 
// make the main stage a drop target 
 
$('#container1').addClass('droppable'); 
 

 
// function to move the cross hairs 
 
function moveCross(x, y){ 
 
    cross.x(x); 
 
    y = y - $('#container1').offset().top; 
 
    cross.y(y < 0 ? 0 : y); 
 
    s1.draw(); 
 
} 
 

 

 
// draggable setup. Movecross used to move the crosshairs. More work needed but shows the way. 
 
$(".draggable").draggable({ 
 
    zIndex: 100, 
 
    helper: "clone", 
 
    opacity: 0.35, 
 
    drag: function(event, ui) {moveCross(ui.offset.left , ui.offset.top + $(this).offset().top)} 
 
}); 
 

 
// set up the droppable 
 
$(".droppable").droppable({ 
 
    drop: function(event, ui) { 
 
    dropShape(ui.position.left, ui.position.top) 
 
    } 
 
}); 
 

 
// Function to create a new shape when we drop something dragged from the palette 
 
function dropShape() { 
 
    var c1 = new Konva.Circle({x: cross.x(), y: cross.y(), radius: 22, fill: 'red', stroke: 'black'}); 
 
    layer1.add(c1); 
 
    cross.x(0); cross.y(0); 
 
    cross.moveToTop(); // move the cross to the top to stop going bahind previously dropped shapes. 
 
    s1.draw(); 
 
}
p 
 
{ 
 
    padding: 4px; 
 
    
 
} 
 
#container1 
 
{ 
 
    display: inline-block; 
 
    width: 500px; 
 
    height: 200px; 
 
    background-color: silver; 
 
    overflow: hidden; 
 
} 
 
#pallette 
 
{ 
 
height: 52px; width: 500px; 
 
border: 1px solid #666; 
 
    margin-bottom: 10px; 
 
    z-index: 10; 
 
} 
 
.draggable 
 
{ 
 
    width:50px; 
 
    height: 50px; 
 
    display: inline-block; 
 
    border: 1px solid #666; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script> 
 
<p>Drag a red circle from the pallette and drop it on the grey canvas. 
 
</p> 
 
<div id='pallette'></div> 
 
<div id='container1'></div>