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

Question

I want to just give padding top and padding bottom to my Text in canvas but when I give padding={20}, it gives padding to all the 4 sides. Can you plase help me to get rid of left/right paddings.

Answer 1

At the current version 8.3.5, Konva does't support that directly.

As a workaround, you can use Konva.Rect for bounding box and transforming target. Then you can proxy rectangle changes to text object.

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>