0

イメージを作成してキャンバスに描画するオブジェクトを作成しようとしています。私が単なる通常の画像オブジェクトではない理由は、オブジェクトがマウス操作のためにキャンバス上のどこに配置されているかを知りたいからです。

ここに私のコンストラクタ関数があります:

function DisplayImg(src, x, y, w, h) {
            this.src = src;
            this.x = x;
            this.y = y;
            this.w = w;
            this.h = h;
        }

キャンバスに描画する描画関数を作成します。

DisplayImg.prototype.draw = function(context) {
            img = new Image();
            img.src = this.src;
            img.onload = function() {
            context.drawImage(img,this.x,this.y,this.w,this.h); 
            }
        }

次に、Instagram への API 呼び出しを行い、いくつかの写真の URL を取得して配列に入れます。ここでは、その配列をループして、それぞれのオブジェクトを作成し、キャンバスに描画しようとしています。データを console.log し、画像の src を確認できるので、データがそこにあることがわかります。これは、データを取得したら呼び出す関数です。

function draw() {  
          for (var i = 0; i < srcArr.length; i++) { 
            var src = srcArr[i];
            x = Math.floor(Math.random()*8);
            y = Math.floor(Math.random()*8);
            var theImage = new DisplayImg(src,x,y,75,75); 
            theImage.draw(context);
          } 
        }

ログは正しいデータを返しますが、キャンバスに画像が描画されません。どんな助けでも大歓迎です。

4

1 に答える 1

1

最初にすべきことは、プロトタイプ関数を修正することです。

DisplayImg.prototype.draw = function(context) {
    var display = this,
        img = new Image();
    img.onload = function() {
        context.drawImage(img,display.x,display.y,display.w,display.h); 
    }
    img.src = this.src;
}

「this」はそのonload関数内のDisplayImageインスタンスに適用されなくなったため、ごみの値をcontext.drawImage関数に渡しています。これで問題が解決するはずです。

第二に、あなたが実際に正しい文脈を通過していることを確認してください。私がそこであなたを助けることができることはあまりありません。私はあなたのコードを例証するフィドルを作りました、しかし私はそれを正気にするためにあなたの「描画」関数を変更しなければなりませんでした：http: //jsfiddle.net/yuaHF/2/

于 2012-08-16T03:12:33.363 に答える