如何根据设备尺寸/分辨率使 Konva-React 响应（缩放）canvas？

Question

我正在创建一个类似视频游戏的应用程序，为此我使用了 Konva React to handle my Canvas, this app will be accessible from either a computer and / or mobile devices and I'd want it to scale / resize itself just like in this example that I found through this answer，当时它仍被称为 KineticJS。

我对 React 和 Konva 还很陌生，所以有很多事情我可能不知道，缺乏知识可能是这个问题背后的原因。

所以，我尝试在 React 中复制代码，但这仍然没有调整大小，而是添加了滚动条以查看我正在寻找的内容。

我也在上尝试了 2 年前的解决方案，它与我这里的示例相同。

import React from 'react';
import { Rect, Layer, Stage } from 'react-konva';

function KCanvas () {
    // Fixed stage size
    var SCENE_BASE_WIDTH = 800
    var SCENE_BASE_HEIGHT = 600

    // Max upscale
    var SCENE_MAX_WIDTH = 1024
    var SCENE_MAX_HEIGHT = 768

    var stageWidth = window.innerWidth % 2 !== 0 ? window.innerWidth - 1 : window.innerWidth;
    var stageHeight = window.innerHeight % 2 !== 0 ? window.innerHeight - 1 : window.innerHeight;
    var stageSize = {width: stageWidth, height: stageHeight};

    var scaleX = Math.min(stageSize.width, SCENE_MAX_WIDTH) / SCENE_BASE_WIDTH;

    var scaleY = Math.min(stageSize.height, SCENE_MAX_HEIGHT) / SCENE_BASE_HEIGHT;

    var minRatio = Math.min(scaleX, scaleY);
    var scale = { x: minRatio, y: minRatio };

    var stagePos = {
        x: (stageSize.width - SCENE_BASE_WIDTH * minRatio) * 0.5,
        y: (stageSize.height - SCENE_BASE_HEIGHT * minRatio) * 0.5
    };
    

    return (
        <Stage 
            size={stageSize}
            scale={scale}
            position={stagePos}>
            <Layer>
            <Rect 
                x={toAbsolute(stage)}
                y={50}
                width={50}
                height={50}
                fill={'green'}
            />
            </Layer>
        </Stage>
    );
}

export default KCanvas;

如所示启用 useStrictMode(true) 也没有帮助。

我的 canvas 稍微调整一下 window 大小的示例

调整大小后：

应该发生的是绿色矩形应该根据 window 大小缩小，就像我在上面发布的第二个 link 中一样：

Answer 1

你的方法很好。您只需要在 window 大小更改时重新绘制舞台。像这样：

const [size, setSize] = React.useState({ width: window.innerWidth, height: window.innerHeight });

React.useEffect(() => {
  const checkSize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
  };

  window.addEventListener('resize', checkSize);
  return () => window.removeEventListener('resize', checkSize);

}, []);

// do your calculations for stage properties
var stageWidth = size.width % 2 !== 0 ? size.width - 1 : size.width;
var stageHeight = size.height % 2 !== 0 ? size.height - 1 : size.height;
// ...

演示：https://codesandbox.io/s/react-konva-responsive-stage-kpmy7?file=/src/index.js

如何根据设备尺寸/分辨率使 Konva-React 响应（缩放）canvas？

How to make Konva-React responsive (scaling) canvas according to device size / resolution?

reactjs

scaling

konvajs

konvajs-reactjs