I am using Konvajs/Vue-Konva
within my Vuejs/Nuxt
application. Using Konva
I am creating the Rect
shape dynamically at run time. I would like to know if there is a way to add a Text/Label
within each of the shapes. I want to add a name to each of Shape
so as to identify each of the Shape
separately.
I have added my code sample here in CodeSandBox.
Can someone please let me know how can I add the Text/Label
to each of the Rect/Shape
that has been created using Vue-Konva
You can use Konva.Group to organize several shapes into structures.
<v-group
v-for="rec in nodeArray"
:key="'node' + rec.id"
:config="{
x: Math.min(rec.startPointX, rec.startPointX + rec.width),
y: Math.min(rec.startPointY, rec.startPointY + rec.height),
}"
@click="showEventInfoModal(rec.name)"
>
<v-rect
:key="'node' + rec.id"
:config="{
width: Math.abs(rec.width),
height: Math.abs(rec.height),
fill: 'rgb(0,0,0,0)',
stroke: 'black',
strokeWidth: 3,
draggable: true,
}"
/>
<v-text
:config="{
text: rec.name,
}"
/>
</v-group>