将转换器添加到动态生成的形状？

Question

我有一个按钮，可以在单击时添加带有方形的新组到图层非常简单的代码我想不需要 post。但我的问题是，如何在单击时向其添加转换器？，我已经用这个 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 但这是只做圆圈而不是行文本。
那么我是否可以为单击的元素上的有源变压器提供解决方案，或者考虑将悬停在变压器盒上作为悬停在节点上？谢谢

Answer 1

得到答案！，我只是创建了一个 public 转换器并在舞台上单击我正在向它添加节点没有转换器到每个组只有一个 public 转换器，一次容纳一个节点.

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

将转换器添加到动态生成的形状？

Adding transformer to dynamically generated shapes?

javascript

canvas

konvajs

konva