Question

我正在尝试从CSS转换属性中获取Matrix值，但由于某种原因它无效。

var object = $(this);

var transMatrix = object.css("-webkit-transform") || 
                  object.css("-moz-transform") || 
                  object.css("-ms-transform") || 
                  object.css("-o-transform") || 
                  object.css("transform");

console.log("Matrix = " + transMatrix);

var values = transMatrix.split('(')[1];
    values = transMatrix.split(')')[0];
    values = transMatrix.split(',');

console.log("Values = " + values);

var a = values[0];
console.log("a = " + a);
var b = values[1];
console.log("b = " + b);

var scale = Math.sqrt(a*a + b*b);
console.log("Scale = " + scale);                                        

var sin = b/scale;
console.log("Sin = " + sin);

var transScale = Math.round(scale * 100) / 100;
console.log("Transform Scale = " + transScale);

var transAngle = Math.round(Math.asin(sin) * (180/Math.PI));
console.log("Transform Angle = " + transAngle);

但是当我输出时，控制台会显示：

Matrix = matrix(0.496273075820661, 0.06093467170257374, -0.06093467170257374, 0.496273075820661, 0, 0)
Values = matrix(0.496273075820661, 0.06093467170257374, -0.06093467170257374, 0.496273075820661, 0, 0)
a = matrix(0.496273075820661
b =  0.06093467170257374
Scale = NaN
Sin = NaN
Transform Scale = NaN
Transform Angle = NaN

从CSS中获取Matrix值后，它似乎正在返回'undefined'

我的'拆分'方法有问题吗？

Answer 1

var values = transMatrix.split('(')[1];
values = transMatrix.split(')')[0];
values = transMatrix.split(',');

应该是

var values = transMatrix.split('(')[1];
values = values.split(')')[0];
values = values.split(',');

或简单地链接它们：

var values = transMatrix.split('(')[1].split(')')[0].split(',');

事实上，你可以使用正则表达式和.match：

更干净地做到这一点

var values = transMatrix.match(/[\d\.]+/g);

来自CSS的jQuery Matrix值

1 个答案: