Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

pixi.jsメモ テクスチャに読み込んだ画像サイズの取得

目的:PIXI.Texture.fromImage(url)で画像を読み込んだ際に、rendererのサイズを画像サイズに合わせたい

ドキュメントとか見てもわからなかったので、ソースコードをから取得する方法を考えてみました。
公式な取得方法をご存知の方は教えてください。
※本記事は公式ドキュメントのソースコードを見て書いています。
公開されているドキュメントのバージョンは2.0.0となっており、最新版(投稿時のバージョン3.0.2)とは違っている可能性がありますが、正しく動作はします。

コードの流れ

1.PIXI.Texture.fromImage(url)を呼ぶ

src/pixi/textures/Texture.js_238行目
PIXI.Texture.fromImage = function(imageUrl, crossorigin, scaleMode)
{
    var texture = PIXI.TextureCache[imageUrl];

    if(!texture)
    {
        texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin, scaleMode));
        PIXI.TextureCache[imageUrl] = texture;
    }

    return texture;
};

2.PIXI.BaseTexture.fromImage(url)が呼ばれる。

ここでImageオブジェクトが作成され、BaseTextureクラスのコンストラクタに渡されます。

src/pixi/textures/BaseTexture.js_223行目以降

PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin, scaleMode)
        ///省略
        var image = new Image();//document.createElement('img');
        if (crossorigin)
        {
            image.crossOrigin = '';
        }

        image.src = imageUrl;
        baseTexture = new PIXI.BaseTexture(image, scaleMode);

3.PIXI.BaseTexture(source,scalemode)が呼ばれる。

ここで画像の読み込み完了処理が行われます。

src/pixi/textures/BaseTexture.js_18行目以降

PIXI.BaseTexture = function(source, scaleMode){
//略
//64行目 this.sourceにimgオブジェクトを代入しています。
/**
     * The image source that is used to create the texture.
     *
     * @property source
     * @type Image
     */
    this.source = source;
//略
//115行目。ここで画像の読み込み完了処理が行われています。ちなみに、scope=thisです。
        this.source.onload = function() {

            scope.hasLoaded = true;
            scope.width = scope.source.naturalWidth || scope.source.width;
            scope.height = scope.source.naturalHeight || scope.source.height;

            scope.dirty();

            // add it to somewhere...
            scope.dispatchEvent( { type: 'loaded', content: scope } );
        };

読み込み完了後、dispatcheEventでloadedイベントを発火しているのがわかります。
ですので、読み込み完了後の処理はこれを使えばよいと思います。
具体的には、

loadImage.js
        //いろいろ省略・・・・・
        var texture=PIXI.Texture.fromImage("./img/sample.jpg");
        texture.baseTexture.addListener("loaded",function(){
                renderer.resize(texture.width,texture.height);
        });

これで画像読み込み完了後に、レンダラーのサイズを変更することができました。
補足ですが、
var texture=PIXI.Texture.fromImage("./img/sample.jpg");

とすると、自動的にPIXI.TextureCache["./img/sample.jpg"]にもtextureがコピーされますので、読み込んだ画像名からテクスチャを取得することも可能です。
また、コードをみるとわかりますが、読み込んだ画像は
texture.baseTexture.sourceに代入されています。

参考 本家のドキュメント

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
9
Help us understand the problem. What are the problem?