将形状从调色板拖到Konvajs舞台上

问题描述

最近在Konvajs聊天流上，有人要求提供一个示例，将其从调色板拖放到Konvajs库前面的HTML5画布上.没有可用的示例，我很好奇如何实现.

On the Konvajs chat stream someone recently asked for an example of drag-and-drop from a palette onto an HTML5 canvas fronted by the Konvajs library. There were no ready examples and I was curious about how to achieve it.

我用Codepen回答了这个问题，但决定在此张贴(以供我自己将来使用).请参阅下面的答案.

I answered the question in a codepen but decided to post here for (my own) future reference. See my answer below.

推荐答案

这是我使用jquery UI可拖动&的解决方案.可放下的东西. Konvajs需要使用jquery，因此使用jquery UI仅一步之遥.调色板是一组小型画布元素，每个可拖动项目绘制一个形状.调色板可以放置在任何html元素上，不需要以任何方式附加到主舞台上.

Here is my solution using jquery UI draggable & droppables. Konvajs requires jquery so the use of jquery UI is only a small step further. The palette is a set of small canvas elements with one shape drawn per draggable item. The palette can be housed on any html element and does not need to be attached to the main stage in any way.

// 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>

这篇关于将形状从调色板拖到Konvajs舞台上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！