使用js从element的matrix推导transform的scale、rotate 和 translate参数
程序员文章站
2022-03-24 12:01:35
transform 网上很多都只介绍了还原角度和缩放的参数,但是没有就偏移量的计算,自己还原了一下公式的意义,进行了公式的反推,具体的推到过程就不详叙了,可以参看w3c的矩阵含义。 直接上干货。 ~~~ function getElementCss(e, name) { var st = windo ......
transform
网上很多都只介绍了还原角度和缩放的参数,但是没有就偏移量的计算,自己还原了一下公式的意义,进行了公式的反推,具体的推到过程就不详叙了,可以参看w3c的矩阵含义。
直接上干货。
function getelementcss(e, name) { var st = window.getcomputedstyle(e, null); return st.getpropertyvalue(name); } function gettransformpara(elem) { // var elem = document.getelementbyid(id); var tr = getelementcss(elem, "-webkit-transform"); if(tr!="none") { var values = tr.split("(")[1].split(")")[0].split(","); var a = values[0]; var b = values[1]; var c = values[2]; var d = values[3]; var e = values[4]; var f = values[5]; var scale1 = math.sqrt(a * a + b * b); var scale2 = math.sqrt(c * c + d * d); var angle = math.atan2(b, a) * (180.0 / math.pi); e = parsefloat(e); f = parsefloat(f); var radian = -math.pi/180.0*angle; var lastx = math.cos(radian)*e - math.sin(radian)*f; var lasty = math.sin(radian)*e + math.cos(radian)*f; return { scalex: scale1, scaley: scale2, angle: angle, movx: lastx, movy: lasty, }; } else { return { scalex: 1, scaley: 1, angle: 0, movx: 0, movy: 0, }; } }
上一篇: js数组方法