2

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

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

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

我打算让它也适用于 IE10 和最新的 Firefox，所以在代码中我使用 WebkitCSSMatrix 来解析矩阵。我用谷歌搜索，发现对于 IE10，我可以使用 MSCSSMatrix 来解析矩阵，但我在 Firefox 中找不到类似的类。

我现在只使用矩阵的 Me 和 Mf 属性，如您在此处看到的，

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

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

4

3 回答 3

2

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

于 2013-03-14T00:39:35.823 回答
1

这对游戏来说来得相当晚，但也许这会对未来的读者有所帮助。我刚刚建立了一个完全做到这一点的类。它提供了一个名为“CSSMatrix”的对象，它完全匹配 WebKitCSSMatrix 的每个方法。这是一个并排比较它们的现场演示。希望这可以帮助！

于 2014-01-22T08:22:03.737 回答
0

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

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);
};

我现在只关心 Me 和 Mf 属性。

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

于 2012-08-18T01:41:14.027 回答