Pixi.js: متى يصبح عرض وارتفاع العفريت صالحين؟

تم إنشاؤها على ٣٠ مارس ٢٠١٣ · 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 في ٣٠ مارس ٢٠١٣

👍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 في ٣٠ مارس ٢٠١٣

👍4

من الممكن أيضًا القيام بهذا الشيء: https://github.com/GoodBoyDigital/pixi.js/issues/29
قم بتغيير وظيفة setTexture للتحقق من ضبط العرض والارتفاع