reactjs - 保持舞台的纵横比

Question

我正在尝试为 Stage 元素设置纵横比，但没有任何运气。

例如，使用画布，我会为风景写以下内容：

const dpr = window.devicePixelRatio || 1
const aspectRatio = 16 / 9
const canvasHeight = 1080 * dpr;
const canvasWidth = 1920 * dpr;

<canvas 
  height={canvasHeight} 
  width={canvasHeight * aspectRatio}
  style={{
    maxWidth: '100%',
    maxHeight: '100%
  }}
/>

这将导致当前 div 中包含具有所需纵横比的画布。当我需要风景时，我会将纵横比更改为 6 / 19；

Answer 1

您可以对舞台容器执行相同的操作：

const aspectRatio = 16 / 9
const canvasHeight = 1080;
const canvasWidth = 1920;

<Stage 
  height={canvasHeight} 
  width={canvasHeight * aspectRatio}
/>

如果您想将舞台容器放入父容器中，因此需要 100% 的父元素，您可以这样做：

const parentWidth = parentContainer.offsetWidht;
const aspectRatio = 16 / 9
const canvasHeight = 1080;
const canvasWidth = 1920;

const scale = parentWidth / canvasWidth;

<Stage 
  height={canvasHeight / aspectRatio} 
  width={parentWidth}
  scaleX={scale}
  scaleY={scale}
/>