如何使 PIXI 渲染器适合浏览器的宽度和高度？答案

【问题标题】：How to fit PIXI renderer into browser width and height?如何使 PIXI 渲染器适合浏览器的宽度和高度？
【发布时间】：2016-12-04 23:02:52
【问题描述】：

我正在开发嵌入在 Wordpress 首页中的文字游戏，它使用PIXI.js 绘制游戏板及其上方和下方 - 一些 jQuery 元素，如按钮和选择菜单。

虽然我表现不错，但有一个问题我不知道如何解决，想知道其他 PIXI 开发人员如何解决它 - 硬编码的画布大小（我已将其设置为 1020 x 1080）对于某些浏览器来说太大了.

例如，这是我的 Macbook Air 上的 2 个 Google Chrome 屏幕截图：

另外，我计划将我的游戏嵌入 Facebook Canvas，这将使屏幕空间更加稀缺。

这是我的 JavaScript 代码的摘录，请问如何改进它？

    var renderer = new PIXI.autoDetectRenderer(1020, 1020 + 60, { 
            view: document.getElementById('board')
    });
    renderer.view.style.padding = '4px';
    renderer.backgroundColor = 0xFFFFFF;

    var charm = new Charm(PIXI);

    var stage = new PIXI.Sprite();
    stage.interactive = true;
    stage
            .on('mousedown',  onDragStart)
            .on('touchstart', onDragStart)
            .on('mousemove', onDragMove)
            .on('touchmove', onDragMove)
            .on('mouseup',         onDragEnd)
            .on('mouseupoutside',  onDragEnd)
            .on('touchend',        onDragEnd)
            .on('touchendoutside', onDragEnd);

【问题讨论】：

标签： javascript jquery wordpress pixi.js

【解决方案1】：

使用window.innerWidth 和window.innerHeight 使您的board 元素达到最佳尺寸。

我的解决方案看起来像这样（仅使用原始画布，没有框架）

var context = document.getElementById('game');
function gameResize()
    {
    if (window.innerWidth/window.innerHeight > 1280/720)
        {
        context.height = window.innerHeight;
        context.width = 1280*context.height/720;
        }
    else
        {
        context.width = window.innerWidth;
        context.height = 720*context.width/1280;
        }
    }

您也可以直接更改board 的大小，并使用PIXI renderer.resize()，但我不确定哪个更正确。

【讨论】：

【解决方案2】：

有renderer.resize()，但它不能缩放游戏板。

使用：

renderer.view.style.width  = ...... + 'px';
renderer.view.style.height = ...... + 'px';

效果很好并且可以扩展内容。

另外，我发现jQuery resizable 可以很好地与 PIXI 配合使用：

$('#board').resizable({
       aspectRatio: 1020 / (1020 + 60),
       minWidth: 1020 / 2
});

【讨论】：