如何将PIXI渲染器适应浏览器的宽度和高度？

Question

我正在开发一个嵌入在WordPress首页的文字游戏，使用PIXI.js绘制游戏板，并在其上下方添加了一些jQuery元素，如按钮和选择菜单。

虽然我进展顺利，但有一个问题我不知道如何解决，想知道其他PIXI开发人员是如何解决的——硬编码的画布大小（我将其设置为1020 x 1080）对于某些浏览器来说太大了。

例如，这里是我的Macbook Air上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);

- Alexander Farber

Answer 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()方法，但我不确定哪种方法更正确。

- georgsh

Answer 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
});

- Alexander Farber