0

我正在创建一个类似视频游戏的应用程序，为此我使用Konva React来处理我的画布，这个应用程序可以从计算机和/或移动设备访问，我希望它像在这个例子中，当它仍然被调用时，我通过这个答案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;

如this answeruseStrictMode(true)所示启用也无济于事。

稍微调整窗口大小的画布外观示例 在此处输入图像描述

调整大小后：

在此处输入图像描述

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

在此处输入图像描述

4

1 回答 1

2

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

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

于 2020-07-15T17:19:15.687 回答