jQuery Panzoomプラグインの行列値の使用方法

Question

jQueryプラグインPanzoom（https://github.com/timmywil/jquery.panzoom）を使用しています。ユーザーがパンすると、CSSマトリックス変換が適用されます。私はこの行列のX値とY値に興味があり、JSファイルはそれぞれ行列[4]と行列[5]として割り当てます。関連するコードは次のとおりです（私が思う）：

pan: function(x, y, options) { 
     if (this.options.disablePan) { return; } 
     if (!options) { options = {}; } 
     var matrix = options.matrix; 
     if (!matrix) { 
      matrix = this.getMatrix(); 
     } 
     // Cast existing matrix values to numbers 
     if (options.relative) { 
      x += +matrix[4]; 
      y += +matrix[5]; 
     } 
     matrix[4] = x; 
     matrix[5] = y; 
     this.setMatrix(matrix, options); 
     if (!options.silent) { 
      this._trigger('pan', matrix[4], matrix[5]); 
     } 
    }, 

私はこれらの値を表示/非表示に使用します。たとえば、ユーザーがx方向に400ピクセル以上移動すると、divが表示されます。

私は体の末尾にスクリプトに次のように置くとき：

(function(){ 
    if (matrix[4] > 400) { 
     $('.textcontainer').show(); 
    } 
    else { 
     $('.textcontainer').hide(); 
    } 
})(); 

私はエラーになっておく「行列が定義されていません。」既にPanzoomファイルによって計算されているこれらの値を参照する方法はありますか？

ありがとうございました。

ギャレット

Answer 1

誰かが好奇心があったら、私はそれを理解しました。私は、Panzoom JSファイルに追加のスクリプトを追加しました。関連するセクションの最後にあります。ダー。ここで

は、それがどのように見えるかです：

pan: function(x, y, options) { 
    if (this.options.disablePan) { return; } 
    if (!options) { options = {}; } 
    var matrix = options.matrix; 
    if (!matrix) { 
     matrix = this.getMatrix(); 
    } 
    // Cast existing matrix values to numbers 
    if (options.relative) { 
     x += +matrix[4]; 
     y += +matrix[5]; 
    } 
    matrix[4] = x; 
    matrix[5] = y; 
    this.setMatrix(matrix, options); 
    if (!options.silent) { 
     this._trigger('pan', matrix[4], matrix[5]); 
    } 
    if (x > 400) { 
     $('.textcontainer').show(); 
    } 
    else { 
     $('.textcontainer').hide(); 
    } 
},