0

我有添加新组的按钮，当单击非常简单的代码时，该组具有正方形，我想不需要发布。但我的问题是，如何在单击时向其添加转换器？，我已经用这个 mouseleave 和 mouseenter 函数完成了它。

  group.on('mouseenter', () => {
        transformer.borderEnabled(true);
        transformer.resizeEnabled(true);
        layer.draw();
    });

    group.on('mouseleave', () => {
        transformer.borderEnabled(false);
        transformer.resizeEnabled(false);
        layer.draw();
    });

它在循环中创建了名为“group”的新组，它工作正常，但是当我将它悬停在圆圈中时，变压器会出现，但是当我去变压器的盒子调整它的大小时，考虑它是 mouseleave 但这只是在圆圈中而不是在行文本中。
那么我可以为单击的元素上的活动变压器提供解决方案，或者考虑将变压器盒上的悬停作为节点上的悬停吗？谢谢

4

2 回答 2

2

mouseleave() 将始终触发，因为指针必须离开组才能使用转换器句柄或微调器。

另一种方法是

  • 点击启用变压器，
  • 即使鼠标移开，也将变压器留在原位
  • 等待单击其他形状以知道您可以隐藏变压器。

这是我相信的标准 GUI 方法。

如果您需要显示悬停焦点，则将组 clientrect 大小的透明矩形粘贴到组中，并将其笔划从透明更改为 mouseenter 中的某种颜色，然后返回 mouseleave。您可能还希望将 rect.listening 设置为 false，以便它不会干扰组中形状上的鼠标事件，但它可能有助于拖动。

演示如下。

// Set up the canvas and shapes
let stage = new Konva.Stage({container: 'container1', width: 300, height: 200});
let layer = new Konva.Layer({draggable: false});
stage.add(layer);

// Add a transformer.
let transFormer1 = new Konva.Transformer();
layer.add(transFormer1);

// Create a sample group 
let group1 = new Konva.Group();
layer.add(group1);
group1.add(new Konva.Circle({x: 20, y: 30, radius: 15, fill: 'magenta', stroke: 'black'}))  
group1.add(new Konva.Circle({x: 60, y: 40, radius: 15, fill: 'magenta', stroke: 'black'}))  
group1.add(new Konva.Rect({x: 90, y: 60, width: 25, height: 25, fill: 'magenta', stroke: 'black'}));
let pos = group1.getClientRect();
let boundRect1 = new Konva.Rect({name: 'boundRect', x: pos.x, y: pos.y, width: pos.width, height: pos.height, fill: 'transparent', stroke: 'transparent'});
group1.add(boundRect1);  

// When mouse enters the group show a border
group1.on('mouseenter', function(){
  let boundRect = this.find('.boundRect');
  boundRect[0].stroke('red');
  layer.draw();
})

// and remove border when mouse leaves
group1.on('mouseleave', function(){
  let boundRect = this.find('.boundRect');
  boundRect[0].stroke('transparent');
  layer.draw();
})


// If the group is clicked, enable the transformer on that group.
group1.on('click', function(){
  transFormer1.attachTo(this)
  layer.batchDraw();
})

// For a more pleasing demo let us have 2 groups.
// Make a copy of group1, offset new group, and change fill on its child shapes except the bound rect 
let group2 = group1.clone(); 
layer.add(group2)
group2.position({x: 120, y: 30});
for (let i = 0, shapes = group2.getChildren(); i < shapes.length; i = i + 1){
  shapes[i].fill(shapes[i].fill() !== 'transparent' ? 'cyan' : 'transparent');
}

stage.draw();
<script src="https://unpkg.com/konva@^3/konva.min.js"></script>
<p>Move mouse over the shapes to see the group borders, click a group to apply the transformer.
</p>
<div id='container1' style="display: inline-block; width: 300px, height: 200px; background-color: silver; overflow: hidden; position: relative;"></div>

于 2020-07-25T12:15:45.307 回答
1

得到了答案！，我只是创建了一个公共变压器，然后在舞台上单击我正在向它添加节点，每个组没有变压器，只有一个公共变压器，一次持有一个节点。

于 2020-07-25T09:57:16.960 回答