Javascript 为react konva stage设置原点坐标

我使用

react konva

进行绘图。我已经配置了

阶段

，并且正在该

阶段

容器中绘制某些形状。我面临的问题是原点坐标（0,0）位于后台容器的左上角。我希望舞台的中心是原点（0,0）。以下是目前的代码：

<Stage
  height={800}
  width={1200}
  style={{ backgroundColor: '#fff', border: 'solid'}}>
  {
    this.state.circlePoints.length !== 0 &&
    <LineComponent
      startX={1200/2}
      startY={800/2}
      endX={this.state.circlePoints[0].pointX*1.3}
      endY={this.state.circlePoints[0].pointY*1.3}
      startColor={firstCircle[0].outerColor}
      endColor={pmData[0].outerColor}
    />
  }
  <CircleComponent
    x={1200/2}
    y={800/2}
    outerRadius={firstCircle[0].weight*1200}
    outerColor={firstCircle[0].outerColor}
    innerRadius={firstCircle[0].weight*1200*0.3}
    innerColor={firstCircle[0].innerColor}
    shadowColor={firstCircle[0].innerColor}
    getCirclePoints={this.getCirclePoints}
  />
  {
    this.state.circlePoints.length !== 0 &&
    <CircleComponent
      x={this.state.circlePoints[0].pointX*1.3}
      y={this.state.circlePoints[0].pointY*1.3}
      outerRadius={pmData[0].weight*1200}
      outerColor={pmData[0].outerColor}
      innerRadius={pmData[0].weight*1200*0.3}
      innerColor={pmData[0].innerColor}
      shadowColor={pmData[0].innerColor}
    />
  }
</Stage>

{
this.state.circlePoints.length！==0&&
}
{
this.state.circlePoints.length！==0&&
}

使用“图层偏移”命令在工作台上重新定位图层。在下面的示例中，您可以看到我添加了x轴和y轴，然后将图层200px偏移到页面中。最后，我在（0,0）处的图层上画一个圆，以确认图层坐标仍然基于此位置，这样您就不必对图形坐标进行任何转换

var stage=新Konva.stage({
容器：'容器'，
宽度：600，
身高：400
});
var layer=新Konva.layer（）；
阶段。添加（层）
var axisX=新Konva.Line({
分数：[-200,0,200,0]，
笔划：“红色”，
冲程宽度：2，
线头：“圆形”，
lineJoin:'圆形'
});
var axisY=新Konva.线({
分数：[0,200,0，-200]，
笔划：“红色”，
冲程宽度：2，
线头：“圆形”，
lineJoin:'圆形'
});  
layer.add（axisX）
layer.add（axisY）
//在舞台上偏移图层
层偏移量（-200）
层偏移（-200）
//在0,0处画一个圆
var circle=新Konva.circle({
x:0,，
y:0，
半径：70，
笔画：“黑色”，
冲程宽度：4
});
//将形状添加到层中
图层。添加（圆圈）；
layer.draw（）；
stage.draw（）
对于上述方法无效的情况，请执行以下操作：

将Y偏移舞台（画布）高度
按当前比例的负值缩放。（如果没有缩放，则使用-1）
例如在

除了文本将被反转之外。我们正在讨论一种可能的方法。