2

私は次の機能を持っています 

"use strict";
function Player
{
    this.width;
    this.height;
    this.framesA = 5;

    this.image = new Image();
    this.image.onload = function ()
    {
        width = this.width;
        height = this.height / framesA;
    }
    this.image.src = "Images/angel.png";
}

このコードを機能させるにはどうすればよいですか？
onload関数が呼び出されたときに、Player関数の幅と高さを画像の幅と高さに統合したいと思います。

strictモードで動作するためにこれが必要です（必須）。

これを別の方法で行う必要がある場合は、お気軽に教えてください。

編集：より現実的な状況を反映するようにコードを更新しました（これがそれほど複雑になるとは知りませんでした）

編集2：コードの別の更新。私はこれを使ってvarを書いたことに気づきませんでした。ごめん。

前もって感謝します

4

4 に答える 4

2

変数を設定し、onloadイベント内から操作を行うだけで、それらはスコープ内にとどまります。

"use strict";
function Player
{
    this.image = new Image();
    this.image.src = "Images/angel.png";
    this.image.onload = function ()
    {
        var width = this.width;
        var height = this.height;
        // Do your manipulations within the `onload` event.
    } 
}
于 2012-01-12T19:54:33.113 に答える
2

コメントから集めたのは、関数の外側から幅と高さにアクセスできるようにしたいということPlayerでした。問題は、幅と高さがいつ利用できるかわからないことです。

それが正しければ、もう少し複雑になります。画像がいつ読み込まれるかわからず、読み込まれる前に幅と高さを設定できないため（imgタグサーバー側で指定しない限り）、コールバックを受け取る関数を使用して画像にアクセスする必要があります。プレーヤーの幅と高さ。

基本的に、幅と高さがまだわからない場合、関数はコールバックをキューに入れるだけです。幅と高さが決定されると、キュー内のすべての関数が呼び出され、幅と高さが引数として渡されます。関数が呼び出されたときにディメンションがすでにわかっている場合は、正しい引数を使用してコールバック関数をすぐに呼び出す必要があります。

これが私がこれを行う方法です：

function Player() {
    'use strict';

    // Store this in a variable so the onload handler can see it.
    var that = this;
    var callbacks = [];

    this.frames = 5;

    this.getDimensions = function (callback) {
        // We don't have the dimensions yet, so put the callback in the queue.
        callbacks.push(callback);
    };

    this.image = new Image();
    this.image.onload = function () {
        var width = this.width;
        var height = this.height / that.frames;

        // Call each of the registered callbacks.
        var i;
        for (i = 0; i < callbacks.length; i += 1) {
            callbacks[i](width, height);
        }
        // Don't keep unnecessary references to the functions.
        callbacks = null;

        // We now know the dimensions, so we can replace the getDimensions
        // function with one that just calls the callback.
        that.getDimensions = function (callback) {
            callback(width, height);
        };
    };
    this.image.src = "Images/angel.png";
}

ディメンションにアクセスする方法は次のとおりです。

var p = new Player();
p.getDimensions(function (width, height) {
    console.log("Player's width is " + width + " and height is " + height);
});
于 2012-01-12T21:11:25.823 に答える
0

ŠimeVidasの本当の意味は次のとおりです

"use strict";
function Player {
    this.image = new Image();
    this.image.src = "Images/angel.png";
}

Player.prototype.getWidth = function() {
    return this.image.width;
}

またはクロージャーベースのオブジェクトが好きな場合

function Player {
    this.image = new Image();
    this.image.src = "Images/angel.png";
    this.getWidth = function() {
      return this.image.width;
    }
}
于 2012-01-12T20:19:43.387 に答える
0

このバリアントは問題なくJSLintを通過し、うまく機能します。だから問題は何ですか？

function Player() {
    "use strict";
    var width, height;
    this.image = new Image();
    this.image.onload = function () {
        width = this.width;
        height = this.height;
    };
    this.image.src = "Images/angel.png";
}

「厳密に使用」を配置する必要があることに注意してください。外部ではなく内部機能。

于 2012-01-12T20:50:16.513 に答える