vue.jsnuxt.jskonvajskonvavue-konva

Konvajs/Vue-konva add Text/Label to each of the created Rect shape


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


Solution

  • 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>