konvajs - KonvaJS - KonvaText 周围的文本边界框，没有顶部，底部空间

Question

在 KonvaText 周围创建边界框的最佳方法是什么，顶部和底部之间没有任何填充或空格？

蓝色框是当前的边界框，要求像绿线一样去掉顶部和底部的空间。所以最终的结果应该是一个类似于现有的边界框，但没有像绿线那样的顶部、底部空间。

非常感谢有人可以提供帮助！

Answer 1

对于任何字体来说，这可能并不简单。每个字符的文本渲染和位置可能会有很大差异，具体取决于所使用的字体。

作为一种解决方法，您可以创建一个适合您所需位置的较小矩形，然后将其所有属性映射到Konva.Text.

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);

const text = new Konva.Text({
  x: 10,
  y: 10,
  text: 'Some text',
  fill: 'green',
  fontSize: 40,
});
layer.add(text);


const box = new Konva.Rect({
  x: text.x(),
  y: text.y(),
  width: text.width(),
  // make height smaller
  height: text.height() - 5,
  draggable: true
});
layer.add(box);

box.on('dragmove transform', () => {
  text.setAttrs({
    x: box.x(),
    y: box.y(),
    scaleX: box.scaleX(),
    scaleY: box.scaleY()
  })
})

const tr = new Konva.Transformer({
  nodes: [box],
});
layer.add(tr);

layer.draw();

https://jsbin.com/kecunonopa/2/edit?html,js,输出