1

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

BATMAN_2008
  • 2,788
  • 3
  • 31
  • 98

1 Answers1

2

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>
lavrton
  • 18,973
  • 4
  • 30
  • 63
  • Thanks a lot for your response. This really helped me, I am facing some issues with creating the `Connectors` to connect the created `Rect Shapes`. Can you please let me know how to achieve this? Any help would be really beneficial for me: https://stackoverflow.com/q/69856925/7584240 – BATMAN_2008 Nov 08 '21 at 20:20