转换后将 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/

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

Keep Konva Label Size in a group after transform

styles

canvas

konvajs