保持舞台的宽高比

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}
/>