Pixi.js: स्प्राइट की चौड़ाई और ऊंचाई कब वैध हो जाती है?

को निर्मित 30 मार्च 2013 · 3टिप्पणियाँ · स्रोत: pixijs/pixi.js

जब मैं एक बनावट को स्प्राइट में लोड करता हूं, और फिर स्प्राइट की चौड़ाई के लिए पूछता हूं, तो मुझे 1 का मान मिलता है। एनीमेशन लूप के माध्यम से केवल दो बार जाने के बाद ही चौड़ाई वैध हो जाती है। क्या लोड किए गए बनावट के आयामों की जांच करने का कोई विश्वसनीय तरीका है?

  var stage = new PIXI.Stage(0x66FF99);
  var renderer = new PIXI.CanvasRenderer(800, 600);
  document.body.appendChild(renderer.view);
  var texture = PIXI.Texture.fromImage("stone.png");
  var stone = new PIXI.Sprite(texture);
  console.log(stone.width + ', ' + stone.height);
  stage.addChild(stone);
  console.log(stone.width + ', ' + stone.height);
  requestAnimFrame( animate );
  console.log(stone.width + ', ' + stone.height);
  renderer.render(stage);
  console.log(stone.width + ', ' + stone.height);

उन सभी console.log() s लॉग "1, 1" भले ही यह 128, 128 होना चाहिए। अगर मैं उस console.log() को एनीमेशन लूप में डालता हूं, तो यह 128, 128 को आउटपुट करना शुरू कर देता है।

स्रोत

samueller

सबसे उपयोगी टिप्पणी

आह हाँ! ऐसा इसलिए है क्योंकि बनावट के लिए छवि लोड नहीं हुई है, इसलिए यह नहीं पता कि इसकी चौड़ाई और ऊंचाई क्या है: /
यह उस अर्थ में बिल्कुल नियमित HTML छवि की तरह व्यवहार करता है।

जिस तरह से मैं इसे हल कर रहा हूं वह मेरी छवियों को प्रीलोड करने के लिए एसेटलोडर का उपयोग कर रहा है। इस तरह जब मैं अपनी बनावट इस तरह बनाता हूं तो चौड़ाई और ऊंचाई हमेशा सही ढंग से सेट होती है:

var assetsToLoad = [ "stone.png"];
// create a new loader
loader = new PIXI.AssetLoader(assetsToLoad);
// use callback
loader.onComplete = onAssetsLoaded
//begin load
loader.load();

function onAssetsLoaded()
{
      var texture = PIXI.Texture.fromImage("stone.png");
      var sprite  = new PIXI.Sprite(texture); 
      // this will log the correct width and height as the image was preloaded into the pixi.js cache
      console.log(stone.width + ', ' + stone.height);
}

एक और तरीका यह होगा कि आप अपने टेक्सचर में एक इवेंटलिस्टर जोड़ें। जब छवि लोड हो जाती है तो यह एक 'अपडेट' ईवेंट भेजती है।

var texture = PIXI.Texture.fromImage("stone.png");
var sprite  = new PIXI.Sprite(texture); 

if(texture.baseTexture.hasLoaded)
{
      // this will log the correct width and height as the image has already loaded
      console.log(stone.width + ', ' + stone.height);
}
else
{
      texture.addEventListener("update", onTextureUpdate)
}

function onTextureUpdate()
{
      // this will log the correct width and height as the image has loaded
      console.log(stone.width + ', ' + stone.height);
}

उम्मीद है की वो मदद करदे :)

GoodBoyDigital 30 मार्च 2013

👍4

सभी 3 टिप्पणियाँ

var assetsToLoad = [ "stone.png"];
// create a new loader
loader = new PIXI.AssetLoader(assetsToLoad);
// use callback
loader.onComplete = onAssetsLoaded
//begin load
loader.load();

function onAssetsLoaded()
{
      var texture = PIXI.Texture.fromImage("stone.png");
      var sprite  = new PIXI.Sprite(texture); 
      // this will log the correct width and height as the image was preloaded into the pixi.js cache
      console.log(stone.width + ', ' + stone.height);
}

var texture = PIXI.Texture.fromImage("stone.png");
var sprite  = new PIXI.Sprite(texture); 

if(texture.baseTexture.hasLoaded)
{
      // this will log the correct width and height as the image has already loaded
      console.log(stone.width + ', ' + stone.height);
}
else
{
      texture.addEventListener("update", onTextureUpdate)
}

function onTextureUpdate()
{
      // this will log the correct width and height as the image has loaded
      console.log(stone.width + ', ' + stone.height);
}

उम्मीद है की वो मदद करदे :)

GoodBoyDigital 30 मार्च 2013

👍4

ऐसा करना भी संभव है: https://github.com/GoodBoyDigital/pixi.js/issues/29
चौड़ाई और ऊंचाई सेट किया गया था या नहीं, यह सत्यापित करने के लिए सेटटेक्चर फ़ंक्शन बदलें

turbosqel 30 मार्च 2013

इस थ्रेड को स्वचालित रूप से लॉक कर दिया गया है क्योंकि इसे बंद करने के बाद हाल ही में कोई गतिविधि नहीं हुई है। कृपया संबंधित बग के लिए एक नया मुद्दा खोलें।

lock[bot] 27 फ़र॰ 2019

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Pixi.js: स्प्राइट की चौड़ाई और ऊंचाई कब वैध हो जाती है?

सबसे उपयोगी टिप्पणी

सभी 3 टिप्पणियाँ

संबंधित मुद्दों