Estoy usando react-konva para dibujar. He configurado el stage y estoy dibujando ciertas formas en ese contenedor stage. El problema al que me enfrento es que las coordenadas de origen (0,0) están en la parte superior izquierda del contenedor del escenario. Quiero que el centro del escenario sea el origen (0,0). Aquí está el código actual:

<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>
1
Arslan Tariq 15 nov. 2017 a las 13:34

2 respuestas

La mejor respuesta

Utilice el comando de desplazamiento de capa para reposicionar la capa en el escenario. En el siguiente ejemplo, puede ver que agrego los ejes xey y luego desplazo la capa 200px en la página. Finalmente, dibujo un círculo en la capa en (0,0) para confirmar que las coordenadas de la capa permanecen basadas en esta ubicación para que no tenga que hacer ninguna traslación en sus coordenadas de dibujo.

var stage = new Konva.Stage({
      container: 'container',
      width: 600,
      height: 400
    });

var layer = new Konva.Layer();
stage.add(layer)

var axisX = new Konva.Line({
      points: [-200, 0, 200, 0],
      stroke: 'red',
      strokeWidth: 2,
      lineCap: 'round',
      lineJoin: 'round'
    });
  
var axisY = new Konva.Line({
      points: [0, 200, 0, -200],
      stroke: 'red',
      strokeWidth: 2,
      lineCap: 'round',
      lineJoin: 'round'
    });  
  
layer.add(axisX)  
layer.add(axisY)  

// offset the layer on the stage
layer.offsetX(-200)
layer.offsetY(-200)

// draw a circle at 0,0

    var circle = new Konva.Circle({
      x: 0,
      y: 0,
      radius: 70,
      stroke: 'black',
      strokeWidth: 4
    });

    // add the shape to the layer
    layer.add(circle);

layer.draw();
stage.draw();
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <div id="container"></div>
            
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
    <script type="text/javascript" src="test.js"></script>



</body>
</html>
3
Vanquished Wombat 15 nov. 2017 a las 11:12

Para aquellos que el método anterior no funciona, haga lo siguiente:

  1. Desplazamiento Y por la altura del escenario (lienzo)
  2. ScaleY por el valor negativo de su escala actual. (Si no hay escala, use -1)

P.ej. en react-konva

<Stage width={500} height={500} scaleY={-1} offsetY={500}>

-1
Aruldd 30 may. 2018 a las 13:46