1

我正在使用 React-Konva 在我的应用程序中绘制形状。我在另一个圆圈内画了一个圆圈并将它们分组。现在，我想做的是在按钮上单击圆圈应该动画（水平移动）。这是我的相关代码：

<Layer>
  <Motion style={{a: spring(open ? 400 : x)}}>
    {({a}) => {
      return(
        <div
          style={{
            WebkitTransform: `translate3d(${a}px, 0, 0)`,
            transform: `translate3d(${a}px, 0, 0)`,
          }}
        >
          <Group draggable={true}>
            <CircleComponent
              x={parseInt(x)}
              y={parseInt(y)}
              radius={parseInt(radius)}
              color={color}
              shadowValue={parseInt(shadowValue)}
            />
            <CircleComponent
              x={parseInt(x)}
              y={parseInt(y)}
              radius={parseInt(innerRadius)}
              color={innerColor}
            />
          </Group>
        </div>
      );}
    }
  </Motion>
</Layer>

现在我收到此错误：'无法读取未定义的属性'_idCounter'。这是因为我在 Layer 标签中引入了一个 div 容器。但是，如果我删除 div 容器并将变换样式应用于 Group 标签，则不会发生任何事情。我已阅读文档并且 Group 类不接受任何样式道具。有什么解决方法吗？

4

1 回答 1

2

您不能添加div为的子级，Layer因为 layer 只能有Konva.Group或Konva.Shape作为子级（不是 DOM 元素）。

Group不要style属性，但你可以使用offsetX并offsetY达到我们的效果。就像是：

<Group draggable={true} offsetX={a}>
于 2017-10-02T09:15:05.363 回答