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-изображение.

Я решил эту проблему, используя assetLoader для предварительной загрузки моих изображений. Таким образом, ширина и высота всегда устанавливаются правильно, когда я создаю свои текстуры следующим образом:

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
измените функцию setTexture, чтобы проверить, установлены ли ширина и высота

turbosqel 30 мар. 2013

Этот поток был автоматически заблокирован, поскольку после его закрытия в последнее время не было никаких действий. Пожалуйста, откройте новую проблему для связанных ошибок.