如何根据设备大小/分辨率使Konva-React响应(缩放)画布？
如何根据设备大小/分辨率使Konva-React响应(缩放)画布？
提问于 2020-07-15 07:11:27
我正在创建一个类似视频游戏的应用程序，为此我使用Konva React来处理我的画布，这个应用程序可以从电脑和/或移动设备访问，我希望它能像this example一样自动缩放/调整大小，当它还叫KineticJS时，我通过this answer找到了它。
我是React和Konva的新手，所以，有很多事情我可能不知道，这种知识的缺乏可能是这个问题背后的原因。
所以，我尝试在React中复制代码，但仍然没有调整大小，而是添加了滚动条来查看内容，而这不是我要找的内容。
两年前我也在this answer上尝试过这个解决方案，它和我这里的例子做的是一样的。
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 answer中所示的useStrictMode(true)也无济于事。
通过少量调整窗口大小来显示画布外观的示例
调整大小后：
应该发生的是绿色矩形应该根据窗口大小缩小，就像我在上面发布的第二个链接中一样：
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-07-16 01:19:16
你的方法很好。你只需要在窗口大小改变时重新绘制舞台。如下所示：
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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62905313
复制相关文章
相似问题
腾讯云开发者
