Login/Register
How to put a text inside a rect using konva.js?
Asked Answered
Solved javascripttextkonvajs
C

2

8

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,


});
Cleo answered 18/3, 2019 at 18:28 Comment(2)
It would help us help you if you posted what you've already tried (including the code) and what exactly goes wrong with that. – Riti
Can you help me out with the related issue on stackoverflow.com/questions/76525337 . I need to display the line with the dimensions of the frame – Resistant
P
10

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/[email protected]/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>
Poilu answered 26/11, 2019 at 15:49 Comment(1)
This is correct, in the previous version we did not have this option. – Cleo
C
2

Your options are:

  1. Use Konva.Label
  2. Create a draggable group with rectangle and text inside
  3. Create one custom shape. Draw rectangle and text inside sceneFunc
Cultch answered 25/8, 2019 at 14:30 Comment(2)
Please consider expanding your answer with examples and code. – Gesticulatory
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://mcmap.net/q/1018619/-create-konvajs-shapes-and-connections-creating-dynamically-based-on-button-click-events/7584240 – Adnah

© 2022 - 2024 — McMap. All rights reserved.