गतिशील रूप से पिक्सी चरण का आकार बदलें और विंडो आकार और विंडो लोड

Question

पर इसकी सामग्री विंडो विंडो आकार पर पिक्सी चरण (कैनवास और सामग्री) को गतिशील रूप से आकार देने का प्रयास कर रहा हूं। और यह शुरुआत में ब्राउज़र विंडो के आकार में अनुपात के बिना लोड हो गया है।

मैं 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(); 
}; 

यहां मेरा ऑनर्सिज़ फ़ंक्शन है - यह कैनवास का आकार बदल रहा है, लेकिन सामग्री नहीं। मैंने सोचा कि यह 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); 

Answer 1

आप आकार बदलने के लिए आकार बदलने के लिए आकार और अनुपात सेट करना चाहते हैं। फिर, आपको आकार बदलने के अनुपात को रखने के लिए विंडो आकार की जांच करने वाले आकार बदलने वाले फ़ंक्शन की आवश्यकता होगी। मैं प्रारंभिक पृष्ठ लोड के लिए मैन्युअल रूप से आकार बदलने का कार्य भी चला रहा हूं।

इसके अलावा, ध्यान दें कि मैं 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;