Firefox 中的 CSSMatrix 等价物？答案

【问题标题】：CSSMatrix equivalent in Firefox?Firefox 中的 CSSMatrix 等价物？
【发布时间】：2012-08-17 02:20:30
【问题描述】：

我目前正在开发一个微小的“可拖动移动小部件”，基本上它只实现了 jQUery UI Draggable 小部件的部分界面（我的项目需要的部分）。

我知道我可以模拟鼠标事件并使 jQuery UI Draggable 在移动/平板电脑平台上正常工作，但这种方法的主要问题是它感觉不够流畅，因为 CSS3 转换是硬件加速，使用 translate3d 而不是更改顶部，左侧的属性产生了巨大的差异，如您在此处看到的：

http://dl.dropbox.com/u/16252882/royws/td/demo/touchdraggable.html

我打算让它也适用于 IE10 和最新的 Firefox，所以在代码中我使用 WebkitCSSMatrix 来解析矩阵。我google了一下，发现IE10可以使用MSCSSMatrix解析矩阵，但是在firefox中找不到类似的类。

我现在只使用矩阵的 M.e 和 M.f 属性，如您在此处看到的，

https://github.com/royriojas/touch-draggable/blob/master/src/touch-draggable.js

所以我知道我可以手动解析它。如果没有其他选择，我将不得不这样做，我只是想知道是否有人知道如何做到这一点，Firefox 中的简单方法:)

【问题讨论】：

这似乎不是一个标准的东西，所以它只能在那些浏览器中工作，而在其他任何地方都不能工作，所以很明显，你必须想出一些额外的代码才能让它在其他地方工作。
谢谢，是的，看来我需要解析矩阵了 :)

标签： firefox draggable jquery-ui-draggable css-transforms

【解决方案1】：

我知道这已经晚了几个月，但如果您仍然感兴趣，我为我从事的一个项目找到（并帮助修复）CSSMatrix shim。链接的版本并不能立即在浏览器中使用（并且稍微落后于my fork），因此如果您只想复制代码并继续，请随时查看browserified version（它更接近于WebKitCSSMatrix 对象）。

【讨论】：

【解决方案2】：

这对游戏来说已经很晚了，但也许这会对未来的读者有所帮助。我刚刚建立了a class that does exactly this。它提供了一个名为“CSSMatrix”的对象，它完全匹配 WebKitCSSMatrix 的每个方法。这是live demo 并排比较它们。希望这会有所帮助！

【讨论】：

【解决方案3】：

所以我找不到等效的类，但这是我用来填补空白的，顺便回答我自己的问题感觉很奇怪！

var isMoz = $.browser.mozilla; //TODO: check for a property detection instead of a browser sniffing

 var reMatrix = /matrix\(\s*-?\d+(?:\.\d+)?\s*,\s*-?\d+(?:\.\d+)?\s*,\s*-?\d+(?:\.\d+)?\s*,\s*-?\d+(?:\.\d+)?\s*\,\s*(-?\d+(?:\.\d+)?)\s*,\s*(-?\d+(?:\.\d+)?)\s*\)/;

$.getMatrix = function (transformString) {

  if (isMoz) {
    //TODO: I couldn't find the equivalent for WebKitCSSMatrix class in firefox

    //Other values are being ignored for now cause I don't really need them now
    var dummyMatrix = {
      e : 0,
      f : 0
    };

    var match = transformString.match(reMatrix);
    if (match) {
      dummyMatrix.e = match[1];
      dummyMatrix.f = match[2];
    }
    return dummyMatrix;
  }
  if (pEnabled) {
    return new MSCSSMatrix(transformString);
  }
  return new WebKitCSSMatrix(transformString);
};

我现在只关心 M.e 和 M.f 属性。

正则表达式也是从TouchScroll源代码“借来的”！

【讨论】：

您要查找的属性检测只是if (!window.WebKitCSSMatrix && !window.MSCSSMatrix) { ... } :)