我正在制作一个使用pixi的游戏,它在640x480像素的画布上进行渲染。可以想象,在PC上查看时,这很小。我想做到这一点:


我想增加画布的大小,以便填满整个屏幕
我想放大内容,以便在不改变其宽高比的情况下尽可能多地填充内容
如果上一步有剩余空间,我想将画布居中


当我在pixi中搜索如何执行此操作时,我可以分别找到每个。但是,我想获得有关如何在一处和全部执行此操作的信息,因为您通常希望一起完成所有这些操作。

最佳答案

我在创建者创建的本示例中修改了源代码:http://www.goodboydigital.com/pixi-js-tutorial-getting-started/ (source download)

这是我想出的:

<!DOCTYPE HTML>
<html>
<head>
    <title>pixi.js example 1</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
    </style>
    <script src="pixi.js"></script>

</head>
<body>
    <script>

    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0x66FF99);

    // create a renderer instance
    var renderer = PIXI.autoDetectRenderer(400, 300);
    renderer.resize(800, 600);

    // add the renderer view element to the DOM
    document.body.appendChild(renderer.view);

    requestAnimFrame( animate );

    // create a texture from an image path
    var texture = PIXI.Texture.fromImage("bunny.png");
    // create a new Sprite using the texture
    var bunny = new PIXI.Sprite(texture);

    // center the sprites anchor point
    bunny.anchor.x = 0.5;
    bunny.anchor.y = 0.5;

    // move the sprite t the center of the screen
    bunny.position.x = 200;
    bunny.position.y = 150;

    var container = new PIXI.DisplayObjectContainer();
    container.scale.x = 2;
    container.scale.y = 2;
    container.addChild(bunny);
    stage.addChild(container);

    function animate() {

        requestAnimFrame( animate );

        // just for fun, lets rotate mr rabbit a little
        bunny.rotation += 0.1;

        // render the stage
        renderer.render(stage);
    }

    </script>

    </body>
</html>


现在,我没有做的一件事就是将它居中。我看到两种可能的方式来做到这一点。我可以使用CSS使canvas居中(我可能会用到的),也可以在代码中通过将另一个外部显示对象添加到使container居中的舞台上来做到这一点。

关于javascript - 如何获得pixi来扩展 Canvas 并放大?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23666420/

10-10 07:48