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 < 0.0000001 ? 0 : /e/.test(d+"") ? d.toFixed(7) : d } function rad(value) { if(isFinite(value)) { return parseFloat(value); } if(~value.indexOf("deg")) {//圆角制。 return parseInt(value,10) * (Math.PI / 180); } else if (~value.indexOf("grad")) {//梯度制。一个直角的100等分之一。一个圆圈相当于400grad。 return parseInt(value,10) * (Math.PI/200); }//弧度制,360=2π return parseFloat(value,10) } var Matrix = $.factory({ init: function(rows,cols){ this.rows = rows || 3; this.cols = cols || 3; this.set.apply(this, [].slice.call(arguments,2)) }, set: function(){//用于设置元素 for(var i = 0, n = this.rows * this.cols; i < n; i++){ this[ Math.floor(i / this.rows) +","+(i % this.rows) ] = parseFloat(arguments[i]) || 0; } return this; }, get: function(){//转变成数组 var array = [], ret = [] for(var key in this){ if(~key.indexOf(",")){ array.push( key ) } } array.sort() ; for(var i = 0; i < array.length; i++){ ret[i] = this[array[i]] } return ret ; }, set2D: function(a,b,c,d,tx,ty){ this.a = this["0,0"] = a * 1 this.b = this["1,0"] = b * 1 this.c = this["0,1"] = c * 1 this.d = this["1,1"] = d * 1 this.tx = this["2,0"] = tx * 1 this.ty = this["2,1"] = ty * 1 this["0,2"] = this["1,2"] = 0 this["2,2"] = 1; return this; }, get2D: function(){ return "matrix("+[ this["0,0"],this["1,0"],this["0,1"],this["1,1"],this["2,0"],this["2,1"] ]+")"; }, cross: function(matrix){ if(this.cols === matrix.rows){ var ret = new Matrix(this.rows, matrix.cols); var n = Math.max(this.rows, matrix.cols) for(var key in ret){ if(key.match(/(\d+),(\d+)/)){ var r = RegExp.$1, c = RegExp.$2 for(var i = 0; i < n; i++ ){ ret[key] += ( (this[r+","+i] || 0) * (matrix[i+","+c]||0 ));//X轴*Y轴 } } } for(key in this){ if(typeof this[key] == "number"){ delete this[key] } } for(key in ret){ if(typeof ret[key] == "number"){ this[key] = toFixed(ret[key]) } } return this }else{ throw "cross error: this.cols !== matrix.rows" } }, //http://www.zweigmedia.com/RealWorld/tutorialsf1/frames3_2.html //http://www.w3.org/TR/SVG/coords.html#RotationDefined //http://www.mathamazement.com/Lessons/Pre-Calculus/08_Matrices-and-Determinants/coordinate-transformation-matrices.html translate: function(tx, ty) { tx = parseFloat(tx) || 0;//沿 x 轴平移每个点的距离。 ty = parseFloat(ty) || 0;//沿 y 轴平移每个点的距离。 var m = (new Matrix()).set2D(1 ,0, 0, 1, tx, ty); this.cross(m) }, translateX: function(tx) { this.translate(tx, 0) }, translateY: function(ty) { this.translate(0, ty) }, scale: function(sx, sy){ sx = isFinite(sx) ? parseFloat(sx) : 1 ; sy = isFinite(sy) ? parseFloat(sy) : 1 ; var m = (new Matrix()).set2D( sx, 0, 0, sy, 0, 0); this.cross(m) }, scaleX: function(sx) { this.scale(sx, 1) }, scaleY: function(sy) { this.scale(1, sy) }, rotate: function(angle, fix){//matrix.rotate(60)==>顺时针转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 && this.d >= 0) { ret.rotation += (ret.rotation <= 0) ? 180 : -180; } ret.skewX = ret.skewY = 0; } else { ret.skewX = skewX/Matrix.DEG_TO_RAD; ret.skewY = skewY/Matrix.DEG_TO_RAD; } return ret; } }); "translateX,translateY,scaleX,scaleY,skewX,skewY".replace($.rword, function(n){ Matrix.prototype[n.toLowerCase()] = Matrix.prototype[n] }); Matrix.DEG_TO_RAD = Math.PI/180;
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年