我正在尝试在窗口调整大小时动态调整 pixi 舞台(画布和内容)的大小。并且最初以浏览器窗口的大小加载,而不改变比例。
我使用以下内容将初始大小基本上设置为
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();
};
这是我的 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);
从 PixiJS 5.0 开始,您可以简单地使用应用程序的 resizeTo 属性:
let app = new PIXI.Application({ resizeTo: window });
文档:http://pixijs.download/release/docs/PIXI.Application.html#Application
您需要设置大小和比例以供调整大小事件函数参考。然后,您需要一个调整大小函数来检查窗口大小,以便在调整大小时保持比例。我还手动运行调整大小功能以启动初始页面加载。
另外,请注意,我没有跑步
renderer.resize
。我只是调整绘图区域的大小。
这里有一个小提琴供您查看:http://jsfiddle.net/2wjw043f/
这是小提琴代码:
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;
我已经使用 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>
对于我的用例,我只需要根据精灵的宽度来缩放精灵。我使用
scale
函数执行此操作,并将其限制为最大值 1:
sprite.scale.set(Math.min(app.screen.width / sprite.texture.width, 1))
从 PixiJS 5.3.0 开始,渲染器上会发出一个
resize
事件。这要归功于 Fabian von Ellerts 在评论中提到的 issue #6081。
app.renderer.on('resize', (width, height) => {
sprite.scale.set(Math.min(width / sprite.texture.width, 1))
})
⚠️ 这只会设置精灵的尺寸。您仍然需要以类似的方式将其放置在画布上,即缩放其位置。
app.renderer.resize(window.innerWidth, window.innerHeight);
window.onresize = function()
{
app.renderer.resize(window.innerWidth, window.innerHeight);
}
var mobiledev;
if (window.innerWidth <= window.innerHeight){
mobiledev = true;
app.renderer.resize(window.innerWidth, window.innerHeight + (((((window.innerWidth * 100) / window.innerHeight) / 100) - 0.5) * window.innerWidth));
} else {
mobiledev = false;
app.renderer.resize(window.innerWidth, window.innerHeight - (((((window.innerHeight * 100) / window.innerWidth) / 100) - 0.65) * window.innerWidth));
}
我使用 PIXI.js 已经接近一年了,在调整大小和响应能力方面遇到了问题。这是我想出的一段代码,没有出现响应问题。我创建了一个 if 语句来检查设备分辨率并根据它放置项目
"resize"
事件更新它,因为您不需要更改内容的位置并且可以提供更好的性能。您可以在 HTML 文件中添加带有您选择的
id
的画布元素,并将其分配给应用程序的
view
属性。
<canvas id="game"></canvas>
const app = new PIXI.Application({
width: 960,
height: 540,
view: document.getElementById("game")
});
然后,将其添加到您的 CSS 文件中:
#game {
padding: 0;
margin: 0;
width: 100vw;
max-width: 100%; /* ensures that it doesn't overflow */
height: auto;
max-height: 100%; /* ensures that it doesn't overflow */
user-select: none; /* removes accidental selection */
}
调整 CSS 属性以适合您的网站。