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

【问题标题】：How to use matrix values from jQuery Panzoom plugin如何使用 jQuery Panzoom 插件中的矩阵值
【发布时间】：2017-05-01 13:26:28
【问题描述】：

我正在使用 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 文件计算的值？

感谢您的帮助。

加勒特

【问题讨论】：

标签： matrix jquery.panzoom

【解决方案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();
    }
},

【讨论】：