Search code examples
react-konvakonva

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


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.enter image description here


Solution

  • 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>