Konvajs/Vue-konva 为每个创建的 Rect 形状添加文本/标签

【问题标题】：Konvajs/Vue-konva add Text/Label to each of the created Rect shapeKonvajs/Vue-konva 为每个创建的 Rect 形状添加文本/标签
【发布时间】：2021-11-05 15:21:38
【问题描述】：

我在我的Vuejs/Nuxt 应用程序中使用Konvajs/Vue-Konva。使用Konva 我在运行时动态创建Rect 形状。我想知道是否有办法在每个形状中添加Text/Label。我想为每个Shape 添加一个名称，以便分别识别每个Shape。

我在CodeSandBox 中添加了我的代码示例。

有人可以告诉我如何将Text/Label 添加到使用Vue-Konva 创建的每个Rect/Shape 中

【问题讨论】：

标签： vue.js nuxt.js konvajs konva vue-konva

【解决方案1】：

您可以使用Konva.Group 将多个形状组织成结构。

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

【讨论】：

非常感谢您的回复。这真的帮助了我，我在创建Connectors 以连接创建的Rect Shapes 时遇到了一些问题。你能告诉我如何实现这一目标吗？任何帮助对我来说都是非常有益的：stackoverflow.com/q/69856925/7584240