How to put a text inside a rect using konva.js?

Question

I have a project with some rects and I need to put text inside them. Is there a Konva class that does this? I have tried using Konva.group (), label ...

This was my last attempt, at the beginning the text stands as it should but when moving the Rect the position is not updated.

var rect = new Konva.Rect({
  x: 20,
  y: 60,
  stroke: '#123456',
  strokeWidth: 5,
  fill: '#ddd',
  width: 600,
  height: 450,
  shadowColor: 'black',
  shadowBlur: 10,
  shadowOffset: [10, 10],
  shadowOpacity: 0.2,
  cornerRadius: 10,
  draggable: true,

})

var complexText = new Konva.Text({
  x: ((rect.attrs.width + rect.attrs.x) - 300)/2 ,
  y: ((rect.attrs.height + rect.attrs.y))/2,
  text:
  "COMPLEX TEXT\n\nAll the world's a stage, and all the men and women merely players. They have their exits and their entrances.",
  fontSize: 18,
  fontFamily: 'Calibri',
  fill: '#555',
  width: 300,
  height:300,
  align: 'center',
  draggable: true,


});

It would help us help you if you posted what you've already tried (including the code) and what exactly goes wrong with that. — Geekfish, Mar 18 '19 at 18:37
Can you help me out with the related issue on https://stackoverflow.com/questions/76525337/ . I need to display the line with the dimensions of the frame — Deep Kakkar, Jun 22 '23 at 06:54

score 10 · Accepted Answer · answered Nov 26 '19 at 15:49

var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height,
    draggable: true
});

var rectangleLayer = new Konva.Layer();
 
function spawnRectangle(angle){
    var rectangle = new Konva.Group({
        x: 25, 
        y: 25, 
        width: 130,
        height: 25,
        rotation: angle, 
        draggable: true,
    }); 

    rectangle.add(new Konva.Rect({
        width: 130,
        height: 25,
        fill: 'lightblue'
    }));

    rectangle.add(new Konva.Text({
        text:'123',
        fontSize: 18,
        fontFamily: 'Calibri',
        fill: '#000',
        width: 130,
        padding: 5,
        align: 'center'
    }));
    rectangleLayer.add(rectangle);
    stage.add(rectangleLayer);
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #D3D3D3;
    background-size: cover;
 }
 
#desc {
    position : absolute;
    top: 5px;
    left: 5px;
}

<script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
 
<body>
    <div id="container"></div>
    <div id="desc">
          <button onclick="spawnRectangle(0)">spawn rectangle</button>
          <button onclick="spawnRectangle(90)">spawn rotated rectangle</button>
    </div>
</body>

This is correct, in the previous version we did not have this option. — Valeria Machado, Nov 26 '19 at 17:19

score 1 · Answer 2 · answered Aug 25 '19 at 14:30

1

Your options are:

Use Konva.Label
Create a draggable group with rectangle and text inside
Create one custom shape. Draw rectangle and text inside sceneFunc

answered Aug 25 '19 at 14:30

Raveendar V

25
8

5

Please consider expanding your answer with examples and code. – Viktor Aug 25 '19 at 14:38
Hi, Is there a way to create the shapes dynamically? In this answer you have created the shapes using predefined values but is there a way to create using the button click event and create as many shapes as the user wants? I have posted the question here if you get a chance can you please have a look and suggest something?https://stackoverflow.com/q/69842757/7584240 – BATMAN_2008 Nov 05 '21 at 09:37

How to put a text inside a rect using konva.js?

2 Answers2