KonvaJS

Question

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

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

如果有人能提供帮助，将不胜感激！

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,output

KonvaJS - KonvaText 周围的文本边界框没有顶部、底部 space

KonvaJS - Text bounding box around KonvaText without top,bottom space

konva