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>