如何仅向 Konva Text 添加 padding top 和 padding bottom

Question

我只想在 canvas 中为我的文本提供 padding top 和 padding bottom 但是当我提供 padding={20} 时，它会为所有 4 个边提供填充。你能帮我去掉 left/right 填充吗？

Answer 1

在当前版本 8.3.5，Konva 不直接支持它。

作为一种变通方法，您可以使用 Konva.Rect 作为边界框和变换目标。然后你可以将矩形更改代理到文本对象。

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: 100,
  y: 50,
  width: 100,
  text: 'hello, this is a long test for testing bounding boxes'
})
layer.add(text);

const padding = 20;
const rect = new Konva.Rect({
  x: text.x(),
  y: text.y() - padding,
  height: text.height() + padding * 2,
  width: text.width(),
  fill: 'rgba(0, 255, 0, 0.05)',
  draggable: true
});
layer.add(rect);

const tr = new Konva.Transformer({
  nodes: [rect],
  rotateEnabled: false,
  enabledAnchors: ['middle-left', 'middle-right']
})
layer.add(tr);

rect.on('dragmove transform', () => {
  text.setAttrs({
    x: rect.x(),
    y: rect.y() + padding,
    width: rect.width() * rect.scaleX()
  });
  rect.height(text.height() + padding * 2);
})

 <script src="https://unpkg.com/konva@^8/konva.min.js"></script>
 <div id="container"></div>

如何仅向 Konva Text 添加 padding top 和 padding bottom

how to add only padding top and padding bottom to Konva Text

react-konva

konva