我正在制作一款使用 pixi 的游戏它在 640x480 像素的 Canvas 上渲染。正如您可以想象的那样，在 PC 上查看时该值非常小。我想实现这个:
- 我想增加 Canvas 的大小，使其填满整个屏幕
- 我想放大内容，以便在不改变宽高比的情况下尽可能填满内容
- 如果上一步有剩余空间，我希望将 Canvas 居中
当我在 pixi 中搜索如何执行此操作时，我可以单独找到其中每一个。但我想在 stackoverflow 上获得有关如何在一个地方完成这一切的信息，因为您通常希望一起完成所有这些事情。
最佳答案
我修改了创建者制作的这个示例中的源代码: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/