Как я могу переключить ось Y на этапе Konva.js, чтобы начать снизу вверх, а не сверху вниз?

Я хотел бы построить данные в декартовой системе координат. С началом координат (0/0) слева внизу. В пределах HTML-холста начало координат находится в верхнем левом углу. Как переключить ось Y (в react-konva или konva)?

function App() {
  const points = [0, 0, 400, 400];

  return (
    <div className="App">
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Line points={points} stroke="red" strokeWidth={10} />
        </Layer>
      </Stage>
    </div>
  );
}

В качестве примера предоставленный код рисует линию от верхнего левого угла к центру. Я хотел бы начать его снизу слева, переключив ось y.

Всего наилучшего, Стефан


konvajs react-konva
person Stefan Crummenerl    schedule 06.07.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Способ 1: использовать отрицательный масштаб Y

Первый способ - просто перевернуть ось Y с помощью scaleY={-1}. Кроме того, вам нужно будет изменить y сцены, чтобы содержимое было видимым.

function App() {
  const points = [0, 0, 400, 400];

  return (
    <Stage
      width={window.innerWidth}
      height={window.innerHeight}
      scaleY={-1}
      y={window.innerHeight}
    >
      <Layer>
        <Line points={points} stroke="red" strokeWidth={10} />
      </Layer>
    </Stage>
  );
}

Но вы должны быть осторожны с этим подходом, что означает, что все рисунки перевернуты. Так что, если у вас есть текст на сцене, он тоже будет перевернут.

https://codesandbox.io/s/react-konva-revert-y-axis-ldqgd

Способ 2: рассчитать позиции вручную:

function invertPoints(points, height = window.innerHeight) {
   return points.map((value, index) => {
      // ignore `x` coordinate change
      if (index % 2 === 0) {
         return value;
      }
      //
      return height - value;
   });
}

function App() {
  const points = invertPoints([0, 0, 400, 400], window.innerHeight);

  return (
    <Stage
      width={window.innerWidth}
      height={window.innerHeight}
    >
      <Layer>
        <Line points={points} stroke="red" strokeWidth={10} />
      </Layer>
    </Stage>
  );
}

https://codesandbox.io/s/react-konva-revert-y-axis-manually-0lwiv?file=/src/index.js

person lavrton    schedule 07.07.2020
comment
Вы когда-нибудь думали о добавлении функции для поворота оси слоя? Таким образом, фигуры / точки графика можно было нарисовать обратно на перевернутом слое, а текст можно было бы выводить на неперевернутом слое. Если бы вы рассматривали это, то для позиционирования текста было бы здорово иметь преобразование между любой точкой на любом слое. Это не обязательно и даже не очень желательно, потому что существует множество библиотек для построения графиков! - person Vanquished Wombat; 08.07.2020
comment
Именно то, что мне нужно. Спасибо! Я думаю, что выберу вариант 1, но 2 тоже интересен. Хорошо иметь оба варианта. - person Stefan Crummenerl; 08.07.2020