我Konvajs/Vue-Konva
在我的Vuejs/Nuxt
应用程序中使用。使用Konva
我Rect
在运行时动态创建形状。我想知道是否有办法Text/Label
在每个形状中添加一个。我想为每个添加一个名称,Shape
以便分别识别每个Shape
。
我在CodeSandBox中添加了我的代码示例。
有人可以让我知道如何将其添加到使用创建Text/Label
的每个Rect/Shape
Vue-Konva
您可以使用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>