how to add only padding top and padding bottom to Konva Text - react-konva

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>