avg-core-ts/src/utils/fitWindow.js

Develop Adventure Game (or ADV, Visual Novel, Galgame, etc.) on your own!

/**
 * @file        util for scaling canvas
 * @author      MicroMatrix <yangpan.1985@bytedance.com>
 * @copyright   2012-2020 bytedance
 * @link        git@code.byted.org:yangpan.1985/avg.git
 */

/**
 * @method scale
 *
 * @param {PIXI.WebGLRenderer} renderer
 * @param {number} width width to fit
 * @param {number} height height to fit
 */
export default function fitWindow(renderer, width, height) {
  const ratio = renderer.width / renderer.height;
  const resolution = renderer.resolution;

  let offsetW,
      offsetH,
      contentW,
      contentH;

  if (ratio > width / height) {
    contentW = width;
    contentH = width / ratio;
    offsetW = 0;
    offsetH = (height - (width / ratio)) / 2;
  } else {
    contentW = height * ratio;
    contentH = height;
    offsetW = (width - (height * ratio)) / 2;
    offsetH = 0;
  }

  const view = renderer.view;

  view.style.position = 'absolute';
  // renderer.view.style.width = contentW + "px";
  // renderer.view.style.height = contentH + "px";
  view.style.backfaceVisibility = 'hidden';
  view.style.transformOrigin = 'left top';
  view.style.webkitTransformOrigin = 'left top';
  view.style.transform = `scale(${contentW / renderer.width * resolution}, ${contentH / renderer.height * resolution}) translateZ(0)`;
  view.style.webkitTransform = `scale(${contentW / renderer.width * resolution}, ${contentH / renderer.height * resolution}) translateZ(0)`;

  view.style.left = `${offsetW}px`;
  view.style.top = `${offsetH}px`;
}