Question

KonvaJS上是否可以从组中分离形状？

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

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

有什么想法吗？

谢谢。

Answer 1

以下是要学习的摘录。一些注意事项：

创建组后，它位于位置（0,0）并具有宽度和高度都设置为0，除非您当然设置了这些参数。但是组不必在概念上包围子对象。
添加到组中的任何形状都属于该形状，但不影响位置或小组人数。
删除组时，子对象是也删除了。注意shape.remove（）被描述为'remove self 从父母那里，但不要破坏。您可以稍后重用节点”。所以组还存在。
按照分组的正确方式取消分组，这也说明了分组的位置。

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

如何从组中分离形状？

1 个答案: