Javascript 动态调整 pixi 舞台的大小及其在窗口调整大小和窗口加载时的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30554533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically resize the pixi stage and it's contents on window resize and window load
提问by Agent Zebra
I'm trying to dynamically resize the pixi stage (canvas and contents) on window resize. And also have it initially load at the size of the browser window without changing ratio.
我正在尝试在窗口调整大小时动态调整 pixi 舞台（画布和内容）的大小。并且最初以浏览器窗口的大小加载它而不改变比率。
I'm using the following to set the initial size basically to window.innerWidth& window.innerHeight- but it's doing something strange, it's loading at a smaller size (but not the size of the canvas specified in the html) then it's expanding to fit the window.
我正在使用以下内容将初始大小基本上设置为window.innerWidth& window.innerHeight- 但它正在做一些奇怪的事情，它以较小的尺寸加载（但不是 html 中指定的画布的大小），然后它会扩展以适应窗口。
var w;
var h;
window.onload = function() {
var w = window.innerWidth;
var h = window.innerHeight;
//this part resizes the canvas but keeps ratio the same
renderer.view.style.width = w + "px";
renderer.view.style.height = h + "px"
// init();
};
Here's my onresize function - it's resizing the canvas, but not the content. I thought being that it's updating the renderer.view, it would resize the content, but it's not doing so - how do I resize the content of the stage/renderer.viewcontent?
这是我的 onresize 功能 - 它调整画布的大小，而不是内容。我认为它正在更新renderer.view，它会调整内容的大小，但它没有这样做 - 我如何调整内容的stage/renderer.view内容？
window.onresize = function (event){
var w = window.innerWidth;
var h = window.innerHeight;
//this part resizes the canvas but keeps ratio the same
renderer.view.style.width = w + "px";
renderer.view.style.height = h + "px";
//this part adjusts the ratio:
renderer.resize(w,h);
}
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xff00ff);
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
// add the renderer view element to the DOM
var mypixiStage = document.body.appendChild(renderer.view);
回答by Bitwise Creative
You will want to setup a size and ratio for the resize event function to reference. Then, you'll need a resize function that checks the window size in order to keep the ratio when resized. I'm also running the resize function manually to start for initial page load.
您需要为调整大小事件函数设置一个大小和比率以供参考。然后，您需要一个 resize 函数来检查窗口大小，以便在调整大小时保持比例。我还手动运行调整大小功能以启动初始页面加载。
Also, note that I'm not running renderer.resize. I'm just resizing the drawing area.
另外，请注意我没有运行renderer.resize. 我只是调整绘图区域的大小。
Here's a fiddle for you to look at: http://jsfiddle.net/2wjw043f/
这里有一个小提琴给你看：http: //jsfiddle.net/2wjw043f/
Here's the fiddle code:
这是小提琴代码：
var size = [1920, 1080];
var ratio = size[0] / size[1];
var stage = new PIXI.Stage(0x333333, true);
var renderer = PIXI.autoDetectRenderer(size[0], size[1], null);
document.body.appendChild(renderer.view);
var texture = new PIXI.RenderTexture();
r1 = new PIXI.Graphics();
r1.beginFill(0x00ffff);
r1.drawRect(0, 0, 100, 100);
r1.endFill();
texture.render(r1);
var block = new PIXI.Sprite(texture);
block.position.x = 100;
block.position.y = 100;
block.anchor.x = .5;
block.anchor.y = .5;
stage.addChild(block);
requestAnimFrame(animate);
resize();
function animate() {
requestAnimFrame(animate);
block.rotation += .01;
renderer.render(stage);
}
function resize() {
if (window.innerWidth / window.innerHeight >= ratio) {
var w = window.innerHeight * ratio;
var h = window.innerHeight;
} else {
var w = window.innerWidth;
var h = window.innerWidth / ratio;
}
renderer.view.style.width = w + 'px';
renderer.view.style.height = h + 'px';
}
window.onresize = resize;
回答by Motla
Starting from PixiJS 5.0 you can simply use the resizeToproperty of your Application:
从 PixiJS 5.0 开始，您可以简单地使用应用程序的resizeTo属性：
let app = new PIXI.Application({ resizeTo: window });
Documentation: http://pixijs.download/release/docs/PIXI.Application.html#Application
文档：http: //pixijs.download/release/docs/PIXI.Application.html#Application
回答by bullzito
I been using Pixi.js for a few weeks and worked on the same problem of resizing the canvas. This class creates a sprite that has a method "applyResize" that does most of the work. The size of the canvas background will equal the same as the parent "domElement" in the constructor. You have to add 'resize' event listener to the sprite after initializing it. Or you can do something else to improve it.
我已经使用 Pixi.js 几个星期了，并解决了调整画布大小的相同问题。这个类创建了一个精灵，它有一个方法“applyResize”来完成大部分工作。画布背景的大小将与构造函数中的父级“domElement”相同。初始化后，您必须向精灵添加“调整大小”事件侦听器。或者你可以做其他事情来改进它。
class PixiBackground {
constructor(type = 'cover', domElement, imgUrl) {
this.domElement = domElement;
this.imgUrl = imgUrl;
this.parent = new PIXI.Container();
this.sprite = new PIXI.Sprite.fromImage(this.imgUrl);
this.parent.addChild(this.sprite);
this.type = type;
}
addTo(container) {
container.addChild(this.parent);
this.applyResize();
}
applyResize() {
const domSize = {
x: this.domElement.clientWidth,
y: this.domElement.clientHeight
};
const imageSize = {
x: this.sprite.texture.width,
y: this.sprite.texture.height
};
const domElementRatio = domSize.x / domSize.y;
const imageRatio = imageSize.x / imageSize.y;
var scale = 1;
var position = new PIXI.Point(0, 0);
if (this.type == 'cover' ? domElementRatio > imageRatio : domElementRatio < imageRatio) {
//photo is taller than background
scale = domSize.x / imageSize.x;
position.y = -(imageSize.y * scale - domSize.y) / 2;
position.x = 0;
} else {
//photo is wider than background
scale = domSize.y / imageSize.y;
position.x = -(imageSize.x * scale - domSize.x) / 2;
position.y = 0;
}
this.sprite.scale = new PIXI.Point(scale, scale);
this.sprite.position = position;
return this;
}
}
const imgUrl = 'https://images.unsplash.com/photo-1528723624453-3e53a413b392?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b44ae61a30e1a05f5defbf48cb5956eb';
const canvasParentElement = document.getElementById('canvasParentElement');
const renderer = PIXI.autoDetectRenderer({
width: canvasParentElement.clientWidth,
height: canvasParentElement.clientHeight
});
canvasParentElement.appendChild(renderer.view);
const stage = new PIXI.Container();
const pixiTestObject = new PixiBackground('cover', canvasParentElement, imgUrl);
PIXI.loader.add(imgUrl).load(function() {
pixiTestObject.addTo(stage)
requestAnimationFrame(animate);
function animate() {
requestAnimationFrame(animate);
renderer.render(stage);
}
});
window.addEventListener('resize', debounce(() => onResizeWindow(), 250));
window.addEventListener('resize', debounce(() => pixiTestObject.applyResize(), 250));
// From underscrore.js
function debounce(func, wait, immediate) {
let timeout;
return function() {
let args = arguments;
let later = () => {
timeout = null;
if (!immediate) func.apply(this, args);
};
let callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(this, args);
}
}
function onResizeWindow() {
const canvas = renderer.view;
const w = canvasParentElement.clientWidth;
const h = canvasParentElement.clientHeight;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
canvas.width = w;
canvas.height = h;
renderer.resize(w, h);
} #canvasParentElement {
background: black;
width: 100vw;
height: 100vh;
overflow: hidden;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js"></script>
<div id="canvasParentElement"></div>回答by TreeNode
adaptive-scaleis very useful for resizing and scaling things
自适应缩放对于调整大小和缩放事物非常有用
