установить исходные координаты для стадии реакции-конва

Я использую react-konva для рисования. Я настроил stage и рисую определенные фигуры в этом контейнере stage. Проблема, с которой я столкнулся, заключается в том, что исходные координаты (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>

reactjs javascript konvajs
person Arslan Tariq    schedule 15.11.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Используйте команду смещения слоя, чтобы изменить положение слоя на сцене. В приведенном ниже примере вы можете видеть, что я добавляю оси x и y, а затем смещаю слой на 200 пикселей по отношению к странице. Наконец, я рисую круг на слое в точке (0,0), чтобы подтвердить, что координаты слоя остаются основанными на этом местоположении, чтобы вам не нужно было выполнять какое-либо преобразование координат вашего чертежа.

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>

person Vanquished Wombat    schedule 15.11.2017

arrow_upward
0
arrow_downward

Для тех, у кого описанный выше метод не работает, сделайте следующее:

  1. Смещение Y по высоте сцены (холста)
  2. ScaleY на отрицательное значение вашего текущего масштаба. (Если нет масштабирования, используйте -1)

например. в react-konva

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

person Aruldd    schedule 30.05.2018
comment
За исключением того, что текст будет инвертирован. здесь обсуждается возможный подход. - person Vanquished Wombat; 21.01.2021