web-dev-qa-db-ja.com

pixiステージの動的なサイズ変更と、ウィンドウのサイズ変更およびウィンドウのロード時のコンテンツ

ウィンドウのサイズ変更で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);
javascriptjquerycanvaspixi.js
11
Agent Zebra

サイズ変更イベント関数が参照するサイズと比率を設定する必要があります。次に、サイズ変更時に比率を維持するために、ウィンドウサイズをチェックするサイズ変更関数が必要になります。また、サイズ変更機能を手動で実行して、初期ページの読み込みを開始します。

また、私は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;
21
Bitwise Creative

PixiJS 5.0以降では、アプリケーションのresizeToプロパティを使用するだけです。

let app = new PIXI.Application({ resizeTo: window });

ドキュメント： http://pixijs.download/release/docs/PIXI.Application.html#Application

5
Motla

私はPixi.jsを数週間使用していて、キャンバスのサイズ変更の同じ問題に取り組みました。このクラスは、ほとんどの作業を行う "applyResize"メソッドを持つSpriteを作成します。キャンバスの背景のサイズは、コンストラクタの親「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>
2
bullzito