transform中的矩阵

责编:menVScode 2018-04-15 17:14 阅读(216)

矩阵存在的问题

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<style type="text/css">
#box { width: 100px; border: 1px solid #000; padding: 100px; }
.div { width: 100px; height: 100px; margin: 10px 0; background: red;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}
</style>
<script type="text/javascript">
document.addEventListener('touchstart', function(e) {
	e.preventDefault();
});
window.onload = function(){
	var div = document.querySelectorAll('.div');
	div[0].style.WebkitTransform = div[0].style.transform = "scale(.5) translateX(100px)";
	console.log(getComputedStyle(div[0])["transform"]); // 获取浏览器计算后的值,是个矩阵 matrix(0.5, 0, 0, 0.5, 50, 0)
	console.log(div[0].style.transform);
};
</script>
</head>
<body>
<div id="box">
	<div class="div"></div>
</div>	
</body>
</html>

transform中所有的变换都是基于矩阵来实现的,rotate、translate、scale等都是浏览器帮我们封装好的功能函数。在使用这些功能函数的时候,浏览器帮助我们变成矩阵操作,通过矩阵变换就能实现元素的变换。 

 但是这块也存在一个问题,就是没法获取样式中设置的动画属性值。通过 getComputedStyle(div[0])["transform"] 方式获取到的是一个矩阵数据,如:matrix(0.5, 0, 0, 0.5, 50, 0);通过 div[0].style.transform 方式获取到是所有的与transform相关的操作,比如: scale(0.5) translateX(100px),是一个字符串,但是需要我们进一步的处理才能获取到相应的值。


transform 2D矩阵:matrix( a, b, c, d, e, f ),矩阵函数;默认数值为:matrix( 1, 0, 0, 1, 0, 0 )

【1】通过矩阵实现实现位移

x轴位移:e = e + x;

var div = document.querySelectorAll('.div');
// x轴方向位移100px
div[0].style.WebkitTransform = div[0].style.transform = "matrix(1, 0, 0, 1, 100, 0)";

y轴位移:f = f + y;

// x轴方向位移100px,y轴位移50px div[0].style.WebkitTransform = div[0].style.transform = "matrix(1, 0, 0, 1, 100, 50)";

【2】通过矩阵实现缩放

x轴缩放:a = a*x    c = c*x    e = e*x

// div[0].style.WebkitTransform = div[0].style.transform = "matrix(1, 0, 0, 1, 100, 50)";
// 先按上面的方式:x轴方向位移100px,y轴位移50px 
// 再x轴方法缩小0.5
div[0].style.WebkitTransform = div[0].style.transform = "matrix(.5, 0, 0, 1, 50, 50)";

y轴缩放:b = b*y    d = d*y    f = f*y

注:变换的执行顺序不同(后写的先执行),得到的 matrix() 也是不一样的。

先位移,再缩放:

位移:matrix(1, 0, 0, 1, 100, 100)
缩放:matrix(.5, 0, 0, .5, 50, 50)	

先缩放,再位移:

缩放-matrix(.5, 0, 0, .5, 0, 0)
位移-matrix(.5, 0, 0, .5, 100, 100)

【3】通过矩阵实现斜切:接收的是弧度,不是叫角度。

角度转弧度 = deg*Math.PI/180。

正弦:Math.sin
余弦:Math.cos
正切:Math.tan

x轴倾斜:c = Math.than( xDeg/180*Math.PI )

var a = 1;
var b = 0;
var c = 0;
var d = 1;
var div = document.querySelectorAll('.div');
c = Math.tan(30*Math.PI/180);
div[0].style.WebkitTransform = div[0].style.transform = "skewX(30deg)";
console.log(getComputedStyle(div[0])["transform"]);

div[1].style.WebkitTransform = div[1].style.transform = " matrix("+a+", "+b+", "+c+", "+d+", 0, 0)";
console.log(getComputedStyle(div[1])["transform"]);

y轴倾斜:b = Math.than( yDeg/180*Math.PI )

【4】通过矩阵实现旋转

a = Math.cos(deg/180*Math.PI);

b = Math.sin(deg/180*Math.PI);

c = -Math.sin(deg/180*Math.PI);

d = Math.cos(deg/180*Math.PI);

var a = 1;
var b = 0;
var c = 0;
var d = 1;
var deg = 45;
var div = document.querySelectorAll('.div');
b = Math.tan(30*Math.PI/180);
div[0].style.WebkitTransform = div[0].style.transform = "rotate("+deg+"deg)";
a = Math.cos(deg/180*Math.PI);
b = Math.sin(deg/180*Math.PI);
c = -Math.sin(deg/180*Math.PI);
d = Math.cos(deg/180*Math.PI);
div[1].style.WebkitTransform = div[1].style.transform = " matrix("+a+", "+b+", "+c+", "+d+", 0, 0)";
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码