CSS3 transform 2D实验,1
这东西在各浏览器的差异性真大,叫人怎么整合与测试啊!
$.require("ready,css",function(){// mass Framework by 司徒正美 var $el = $("#test") var matrix = $el.css("transform","rotate(90deg)").data("matrix",void 0, true) //打印浏览器使用getComputedStyle得到结果 $.log($el.css("transform")) //打印经过$.Matrix处理过的结果 $.log( matrix.get2D() ); //分解原始数值,得到a,b,c,e,tx,ty属性,以及返回一个包含x,y,scaleX,scaleY,skewX,skewY,rotation的对象 matrix.decompose2D(); $.log(matrix.a) $.log(matrix.b) $.log(matrix.c) $.log(matrix.d) $.log(matrix.tx) $.log(matrix.ty); });
下面测试结果
//FF12 matrix(0, 1, -1, 0, 0px, 0px) matrix(0,-1,1,0,0,0) 0 1 -1 0 0 0 //chrome20 matrix(0.0000000000000002220446049250313, 1, -1, 0.0000000000000002220446049250313, 0, 0) matrix(0,-1,1,0,0,0) 0 1 -1 0 0 0 //opera11.62 matrix(0, 1, -1, 0, 0, 0) matrix(0,-1,1,0,0,0) 0 1 -1 0 0 0 //safari5.1.5 matrix(0.0000000000000002220446049250313, 1, -1, 0.0000000000000002220446049250313, 0, 0) matrix(0,-1,1,0,0,0) 0 1 -1 0 0 0
一个放弃的矩阵类:
//http://extremelysatisfactorytotalitarianism.com/blog/?p=1002 //http://someguynameddylan.com/lab/transform-origin-in-internet-explorer.php //优化HTML5应用的体验细节,例如全屏的处理与支持,横屏的响应,图形缩放的流畅性和不失真,点触的响应与拖曳,Websocket的完善 //关于JavaScript中计算精度丢失的问题 http://rockyee.iteye.com/blog/891538 function toFixed(d){ return d > -0.0000001 && d 顺时针转60度 fix = fix === -1 ? fix : 1; angle = rad(angle); var cos = Math.cos(angle); var sin = Math.sin(angle);// a, b, c, d var m = (new Matrix()).set2D( cos,fix * sin , fix * -sin, cos, 0, 0); return this.cross(m) }, skew: function(ax, ay){ var xRad = rad(ax); var yRad; if (ay != null) { yRad = rad(ay) } else { yRad = xRad } var m = (new Matrix()).set2D( 1, Math.tan( xRad ), Math.tan( yRad ), 1, 0, 0); return this.cross(m) }, skewX: function(ax){ return this.skew(ax, 0); }, skewY: function(ay){ this.skew(0, ay); }, // ┌ ┐┌ ┐ // │ a c tx││ M11 -M12 tx│ // │ b d ty││ -M21 M22 tx│ // └ ┘└ ┘ //http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/flash/geom/Matrix.html //分解原始数值,得到a,b,c,e,tx,ty属性,以及返回一个包含x,y,scaleX,scaleY,skewX,skewY,rotation的对象 decompose2D: function(){ var ret = {} this.a = this["0,0"] this.b = this["1,0"] this.c = this["0,1"] this.d = this["1,1"] ret.x = this.tx = this["2,0"] ret.y = this.ty = this["2,1"] ret.scaleX = Math.sqrt(this.a * this.a + this.b * this.b); ret.scaleY = Math.sqrt(this.c * this.c + this.d * this.d); var skewX = Math.atan2(-this.c, this.d); var skewY = Math.atan2(this.b, this.a); if (skewX == skewY) { ret.rotation = skewY/Matrix.DEG_TO_RAD; if (this.a = 0) { ret.rotation += (ret.rotation
- 上一篇 »ansible的简单实验
- 下一篇 »JavaScript的DOM编程--06--两个实验