0

我正在使用 jQuery 插件 Panzoom ( https://github.com/timmywil/jquery.panzoom )。当用户平移时,它会应用 CSS 矩阵变换。我只对此矩阵的 X 和 Y 值感兴趣,JS 文件分别将其指定为 matrix[4] 和 matrix[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 文件已经计算的这些值?

谢谢您的帮助。

加勒特

4

1 回答 1

0

如果有人好奇,我想通了。我刚刚在 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();
    }
},
于 2016-12-16T20:50:27.700 回答