使用 pixi.js 正确缩放文本？答案

【问题标题】：Proper text scaling with pixi.js?使用 pixi.js 正确缩放文本？
【发布时间】：2016-11-30 04:57:54
【问题描述】：

我做错了什么？当我在舞台上添加简单文本时，它在桌面上看起来不错，但在移动设备上呈现完全不同（大小位置等）。

如何让它在不同的设备上一致地显示相同的内容？

游戏不能有静态像素大小，它需要缩放到浏览器窗口大小，但要保持其纵横比。

我设置了一个完整的demo来演示这个问题：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
      #game {
          position: absolute;
      }
      html,body {
          padding:0;
          margin:0;
          height:100%;
          width:100%;
          background-color: #000000;
      }
    </style>
  </head>
  <body>
    <div id="game"></div>
    <script src="https://raw.githubusercontent.com/pixijs/pixi.js/master/bin/pixi.min.js"></script>
    <script>
        var gameElem = document.getElementById('game');
        var GAME_WIDTH = Math.max(window.screen.width,window.screen.height);
        var GAME_HEIGHT = GAME_WIDTH/16*9;

        var renderer = PIXI.autoDetectRenderer(GAME_WIDTH, GAME_HEIGHT,{backgroundColor : 0x000000});
        gameElem.appendChild(renderer.view);

        // create the root of the scene graph
        var stage = new PIXI.Container();

        var textOptions = {
            font: 'bold 64px Roboto', // Set style, size and font
            fill: '#333333', // Set fill color to blue
            align: 'center', // Center align the text, since it's multiline
            stroke: '#dddddd', // Set stroke color to a dark blue-gray color
            strokeThickness: 20, // Set stroke thickness to 20
            lineJoin: 'round' // Set the lineJoin to round instead of 'miter'
        }

        var topText = new PIXI.Text('Some text to do testing!', textOptions);
        topText.anchor.x = 0.5;
        topText.anchor.y = 0.5;
        topText.x = GAME_WIDTH / 2;
        topText.y = GAME_HEIGHT / 2-150;
        stage.addChild(topText);

        autoSetRenderSize(gameElem);
        window.addEventListener("resize", function() {autoSetRenderSize(gameElem)});

        function autoSetRenderSize(container){
            ratio = Math.min(window.innerWidth/GAME_WIDTH, window.innerHeight/GAME_HEIGHT);
            stage.scale.x = stage.scale.y = ratio;
            var newWidth = Math.ceil(GAME_WIDTH * ratio);
            var newHeight = Math.ceil(GAME_HEIGHT * ratio);
            renderer.resize(newWidth, newHeight);
            container.style.top = (window.innerHeight-newHeight)/2 + 'px';
            container.style.left = (window.innerWidth-newWidth)/2 + 'px';
            renderer.render(stage);
        }
    </script>
  </body>
</html>

在屏幕分辨率为 1920x1080 的设备上：在设备上，屏幕分辨率为 320x480：

当您只是更改浏览器大小时不会发生这种情况。

【问题讨论】：

标签： javascript html css pixi.js

【解决方案1】：

如果你想拥有 2 个完全独立的分辨率，你不能依赖“文本缩放”——你只需要为你的 textOptions 设置不同的参数。 64px 的文本在高分辨率下很好，但在低分辨率下绝对巨大。

一种无需不同设置即可覆盖不同分辨率的方法是在创建渲染器时使用分辨率设置。

例如

let renderer = PIXI.autoDetectRenderer( 960, 540, {
    resolution: 1
} );

在内部，您的游戏的所有定位和尺寸都将是 960x540，输出的渲染将是 960x540。

let renderer = PIXI.autoDetectRenderer( 960, 540, {
    resolution: 2
} );

在内部，您的游戏的所有定位和尺寸都将是 960x540，输出的渲染将是 1920x1080。

所以这样一来，你就不用担心精灵在不同的地方定位，改变文字大小了；它会在 PIXI 中自动为您处理。

【讨论】：