0

我想绘制笛卡尔坐标系中的数据。原点 (0/0) 从左下角开始。在 HTML-canvas 中，原点位于左上角。如何切换 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轴从左下角开始。

一切顺利，斯特凡

4

1 回答 1

1

方式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

于 2020-07-07T14:54:22.857 回答