Question

我目前正在开发一个小的“可拖动的移动小部件”，基本上它只实现了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中找不到类似的类。

我现在只使用Matrix的M.e和M.f属性，正如您在此处所见，

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

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

Answer 1

我知道这已经晚了几个月了，但是如果你仍然感兴趣的话，我找到了（并帮助修复了）我工作的项目CSSMatrix shim。链接版本不能立即使用浏览器（稍微落后于my fork），因此如果您只想复制代码并去，请随时查看browserified version（与WebKitCSSMatrix更匹配的内容）对象）。

Answer 2

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

Answer 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属性。

正则表达式也是从[{3}}源代码中“借用”的！

Firefox中的CSSMatrix等效？

3 个答案: