如何使用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方向上平移超过400px，则会出现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(); 
    } 
},