Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

目的: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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした