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();
    }
},

如何使用jQuery Panzoom插件中的矩阵值

1 个答案: