Menu
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,
});
809
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>Your options are:
sceneFunc
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
