Konva 带子项的可拖动矩形

Question

我想添加一个带有子元素（下图中的图标和文本）的可拖动矩形（下图中的红色）。每当我尝试这个时，我都会收到这个错误：

TypeError: parentInstance.add is not a function

这里是尝试添加文本的代码：

<Rect x={0} y={0} width={200} height={100} draggable fill="red">              
    <Text text="Pencil" />                                                      
</Rect>

Answer 1

Rect 或其他 Konva 形状不能有子元素。您不能将形状嵌套到另一个形状中。对于这种情况，您需要使用 Groups

<Group x={0} y={0} draggable>
  <Rect width={200} height={100} fill="red" />
  <Text text="Pencil" />                                                      
</Group>

Konva 带子项的可拖动矩形

Konva Draggable Rect with Children

react-konva