如何从组中分离形状？

Question

KonvaJS 有什么方法可以从组中分离形状吗？

我创建了一个包含 3 个形状的组。然后我将鼠标悬停事件添加到组中。

然后，如果我想销毁我不知道该怎么做的组，并且组鼠标悬停事件仍然保留在所有形状上。

有什么想法吗？

提前致谢。

Answer 1

这是一个可供学习的片段。一些注意事项：

创建组时，它位于位置 (0,0) 并且具有宽度和 height 都设置为 0，当然除非你设置这些参数。但是组不必在概念上包围 child objects。
任何添加到该组的形状都属于它但不影响位置或组的大小。
删除组后，child objects 也删除了。请注意 shape.remove() 被描述为“删除自我来自 parent，但不要破坏。您可以稍后重用节点'。所以组还存在。
un-group 的正确方法是根据还考虑了组定位的代码段。

// Set up the canvas / stage
var stage = new Konva.Stage({container: 'container1', width: 600, height: 300});

// Add a layer for line
var layer = new Konva.Layer({draggable: false});
stage.add(layer);

var rect1 = new Konva.Rect({x: 20, y: 60, width: 60, height: 30, fill: 'cyan'});
layer.add(rect1);

var rect2 = new Konva.Rect({x: 100, y: 80, width: 30, height: 60, fill: 'magenta'});
layer.add(rect2);

stage.draw();

var group;
$('#make-group').on('click', function(){

group = new Konva.Group({draggable: true, x: 20, y: 30, width: 400, height: 300});
group.add(rect1);
group.add(rect2);

layer.add(group);
$('#info').html('Rects are now in the group - see how they jump because group has (x,y). Click or mouseover one !');

group.on('click mouseover', function(){ 
  $('#info').html('group event');
  setTimeout(function(){ $('#info').html(''); }, 250)  
  })

$('button').show();
layer.draw();

})
$('#remove-group').on('click', function(){
$('#un-group').hide();
$('#info').html('group.remove() is the wrong solution - it removes the group AND children. Click group button.');

group.remove()
layer.draw()

})

$('#un-group').on('click', function(){
$('#remove-group').hide();

// If grouping shapes for draggability or event admin there is no need to set size or position,
// but if you did and you want to retain the position of the shapes without the group then
// use the getAbsolutePosition() function to get and set the positions.
var pos = rect1.getAbsolutePosition(); // get abs position
rect1.moveTo(layer)                    // move off the group and onto the layer
rect1.position({x: pos.x, y: pos.y});  // set the position.

pos = rect2.getAbsolutePosition();
rect2.moveTo(layer)
rect2.position({x: pos.x, y: pos.y});

group.removeChildren();               // remove children from the layer but don't destroy
group.destroy()                       // erase the layer and kill it.
layer.draw()                          // refresh the layer

$('#info').html('Rects are now back on the layer - click now and there is no group event.');

})

$('#info').html('Click the group button.');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<div style='position: absolute; z-index: 10;' >
<button id='make-group'>Group</button>
<button id='remove-group'>Remove-Group</button>
<button id='un-group'>Un-Group</button>
<p id='info' style='padding-left: 10px;'></p>
</div>
<div id='container1' style="width: 300px, height: 200px; background-color: silver;"></div>

如何从组中分离形状？

How to detach a shape from a group?

konvajs