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

Posted 2023-05-07

【中文标题】如何使用 jQuery Panzoom 插件中的矩阵值

【英文标题】：How to use matrix values from jQuery Panzoom plugin

【发布时间】：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 文件计算的值？

感谢您的帮助。

加勒特

【参考方案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();
    
,