CODEWITHSUNDEEP
reactjskonvajskonvajs-reactjs
user13018020
user13018020

Reputation: 11

Maintain aspect ratio for stage

I'm trying to set an aspect ratio to the Stage element,but without any luck.

For example, with a canvas, I would write the following for landscape:

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

This would result in a canvas with the required aspect ratio contained within the current div. When I need landscape I would change the aspect ratio to 6 / 19;

Upvotes: 1

Views: 555

Answers (1)

lavrton
lavrton

Reputation: 20288

You can do the same for stage container:

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

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

If you want to fit the stage container into parent container, so it takes 100% of parent element you can do this:

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

Upvotes: 1

Related Questions