这篇文章上次修改于 1108 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

今天一天差不多都在搞这个,旋转是真的麻烦,拉伸的话直接乘就好了.好了,废话不多说.既然要修改transform的值,那这个值就得存在,要么直接style设置,要么JS添加$('div.box').css('transform', 'matrix(1,0,0,1,0,0)');这是默认值,加上去一点效果都看不到的.

今天碰到的问题还是挺多的,比如要获取矩阵的六个值,获取之后还要修改再添加回去,得出的结论是就旋转操作而言,还是别玩矩阵了(我搞了个寂寞).

取值

• 如何获取到矩阵的六个值?

只要能获取到就行.对于一般的值matrix(0.207912, 0.978148, -0.978148, 0.207912, 0, 0)而已,构成部分有开头的'matrix(',中间的数字部分和','以及结尾的')',好消息是这种格式是固定的,坏消息是开头是字母.对于这种类型的,可以使用替换和分割,JS我不太了解,但PHP有str_replace和str_split以及explode这三种方法来处理上面那个字符串虽然操作简单,但代码量相对较多.因为我之前学了点正则所以这次打算拿来练练手,最终得出的结果是/-?\d\.?\d{0,}/g,粗略解释一下就能懂.

首先,开头和结尾的'/'是JS正则的规范,-?的意思是可能有且只有一个-,\d是匹配数字,\.是取消转义的.,?\d{0,}是匹配0~无限个\d(数字)的意思,最后的g也是JS的参数,匹配多次.

过程就不说了,直接说结论.matrix的小数最多六位,因此不用管{0,}的上限,整数部分的范围就是正弦余弦的范围([-1,1]),本来是打算直接用0替换掉第一个\d的,后来想到可能为1就换回去了,也没什么好注意的了.

• 如何在JS中取正则匹配的值?

这就不得不提半年前的项目了,当时的需求也是正则匹配取值(Java),但是我居然找不到,继而放弃了,这次找到了,记录一下.

str.match(reg)或者reg.exec(str)均可.区别是exec在加参数g的情况下一次只匹配一个,需要使用循环来获取全部匹配值,而match直接匹配所有并返回列表,因此不管是从效率还是需求而言,match都更好

修改

• 通过矩阵修改transform属性

在震惊!一小伙写CSS竟用到矩阵中我提到过矩阵的六个属性的含义,而本次就是修改这些属性的值.我的想法是通过函数传参来实现不同需求的旋转功能,但实际效果是前四个值变化区间不仅和我输入的值(步长)相差甚大,而且还出现了正负横跳现象,最后发现是因为单位不一样,我们平时输入的是度(deg),而在JS中计算使用的是弧(rad),这就是出现问题的原因,因此需要转化一下deg * Math.PI / 180,然后就发现正常了

• 细节优化

上面的操作不可避免的用到了除法,带来的是浮点数的精度损失以及小数部分过长(甚至还出现了科学计数法)

因此需要修♂正一下,使用num.toFixed(6)调整到和输出的一样最大六位小数就行了,精度损失我的想法是用比较符判断,如0.5变成0.499999是在允许范围内的.

实现

回头再说