Question

我正在使用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>

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

Answer 1

您无法将div添加为Layer的孩子，因为图层只能包含Konva.Group或Konva.Shape作为子元素（不是DOM元素）。

Group没有style属性，但您可以使用offsetX和offsetY来实现我们的效果。类似的东西：

<Group draggable={true} offsetX={a}>

无法使用React-Motion为React-Konva Circle设置动画

1 个答案: