3

Webカメラのビデオをcanvas要素でオーバーレイするCoffeeScriptアプリケーションを作成しています（これはコンテキスト用であり、私の問題とは関係がないようです）。ビデオにオーバーレイする適切なキャンバスサイズを取得するには、次のloadedmetadataようにイベントハンドラー関数をイベントにアタッチします。

WebcamWizard.prototype.initializeUserMedia = function(stream) {
  // ...
  video = document.getElementById('webcam');
  video.addEventListener('loadedmetadata', function(e) {
     // ...
     v = e.srcElement;
     // ...
  });
  // ...
}

これはうまく機能します。ただし、この場合の私の好みは、次のように、この特定のクラスの別のメソッドでこのハンドラーメソッドを定義することです。

WebcamWizard.prototype.initializeUserMedia = function(stream) {
   // ...
   video = document.getElementById('webcam');
   video.addEventListener('loadedmetadata', this.initializeCanvas);
   // ...
}

WebcamWizard.prototype.initializeCanvas = function(e) {
   // ...
   video = e.srcElement;
   // ...
}

私がこれを好む理由は、CoffeeScriptの見栄えが良くなり、作業しているクラス内のキャンバスDOMオブジェクトに簡単にアクセスできるようになるためです。しかし、2番目を実行すると、initializeCanvasメソッドが呼び出されていないようです。コンソールにもエラーは報告されていません。何故ですか？

不思議なことに、この方法でメソッドを呼び出すと、同じファイルでまったく同じように機能するようです。

4

1 に答える 1

5

this問題は、イベントの発生後に「initializeCanvas」が呼び出されたときに、有用な参照が欠落していることです。関数への参照を渡していますが、thisバインディングは一時的なものであり、存続しません。

別の関数でラップするか、次を使用できます.bind()。

var wiz = this;
video.addEventListener('loadedmetadata', function() { wiz.initializeCanvas });
于 2012-07-09T14:35:53.497 に答える