相当于Firefox的CSSMatrix？ [英] CSSMatrix equivalent in Firefox?

问题描述

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

我知道我可以模拟鼠标事件并使jQuery UI Draggable在移动/平板电脑平台上正常工作，但是这种方法的主要问题是不够流畅，而且由于CSS3变换是硬件加速的，所以使用translate3d而不是改变顶部，左边的属性产生了巨大的差别，您可以在这里看到：

< a href =http://dl.dropbox.com/u/16252882/royws/td/demo/touchdraggable.html =nofollow> http://dl.dropbox.com/u/16252882/royws/ td / demo / touchdraggable.html

我打算让它在IE10和最新的Firefox上运行，所以在代码中我使用WebkitCSSMatrix来解析矩阵。我GOOGLE了它，发现IE10我可以使用MSCSSMatrix解析矩阵，但我无法找到一个类似的类在Firefox。

我只使用现在的我和矩阵的Mf属性，你可以在这里看到，

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

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

解决方案

所以我无法找到相应的类，但这是我用来填补空白，这感觉很奇怪，回答我自己的问题！

  var isMoz = $ .browser.mozilla; // TODO：检查属性检测而不是浏览器嗅探
 
 var reMatrix = /matrix\(\\\\\\++(?:\.\\\++）？ \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：我无法在firefox中找到WebKitCSSMatrix类的等价物
 
 //其他值现在被忽略因为我现在不需要它们
 var dummyMatrix = {
e：0，
f：0 
}; 
 
 var match = transformString.match（reMatrix）; 
 if（match）{
 dummyMatrix.e = match [1]; 
 dummyMatrix.f = match [2]; 
} 
返回dummyMatrix; 
 
 if（pEnabled）{
 return new MSCSSMatrix（transformString）; 
} 
返回新的WebKitCSSMatrix（transformString）; 
}; 
  

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

另外正则表达式是从 TouchScroll 源代码中借用的。

I'm currently developing a tiny "draggable for mobile widget", basically it implements only part of the interface of the jQUery UI Draggable widget (The part I needed for my project).

I Know I can simulate the mouse events and make the jQuery UI Draggable to work properly on the mobile/tablet platforms, but the main issue with that approach is that it does not feel smooth enough, and since the CSS3 Transforms are hardware accelerated, using translate3d instead of changing the top, left properties made a huge difference as you can see here:

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

I was planning to make it work for IE10 and latest Firefox too, so in the code I was using WebkitCSSMatrix to parse the matrix. I googled it and found that for IE10 I can use the MSCSSMatrix to parse the matrix, but I cannot find a similar class in firefox.

I'm only using now the M.e and M.f properties of the Matrix, as you can see here,

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

so I know I can parse it manually. If there is no other option, I will have to do it that way, I was just wondering if anyone knew how to do that, the easy way in firefox :)

解决方案

So I couldn't find the equivalent class, but here is what I used to fill the gap, It feels weird answer my own question by the way!

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

I only care about the M.e and M.f properties for now.

Also the regular expression was "borrowed" from TouchScroll source code!

这篇关于相当于Firefox的CSSMatrix？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！