转换后将 Konva 标签大小保留在一个组中

Question

我得到了以下代码来绘制一个可拖动的矩形，并在鼠标悬停时显示标签
问题是我希望标签在对形状应用转换后保持其大小(使用鼠标单击添加转换器(

rectangle.on('mouseover', function() {
if (mode !== 'tr')
rectangle.add(labelLeft);
layer.draw();
})
rectangle.on('mouseout', function() {
labelLeft.remove();
layer.draw();
})
// add the labels to layer
layer.add(rectangle)
var tr = new Konva.Transformer({
anchorStroke: 'red',
anchorFill: 'yellow',
anchorSize: 5,
borderStroke: 'green',
borderDash: [3, 3]
});
// add the layer to the stage
stage.add(layer);
stage.on('click', function(e) {
console.log(e.target)
if (e.target.name() === 'rect') {
mode = 'tr';
labelLeft.remove();
layer.add(tr);
tr.attachTo(rectangle);
layer.draw();
} else {
mode = '';
tr.remove();
console.log(labelLeft)
layer.draw();
}
})

这是一个JSFiddle与当前结果

Answer 1

>Konva.Transformer正在更改组的scaleX和scaleY属性。

所有内部节点都将受到该规模的影响(标签也是如此(。

避免此类行为的最简单方法是将标签移出组。例如进入图层。

rectangle.on('mouseover', function() {
if (mode !== 'tr') {
layer.add(labelLeft);
labelLeft.absolutePosition(rectangle.absolutePosition());
layer.draw();
}
});
rectangle.on('dragstart', function() {
labelLeft.remove();
layer.draw();
})
rectangle.on('mouseout', function() {
labelLeft.remove();
layer.draw();
})

演示：https://jsfiddle.net/of3ez6xg/