clay-core
Version:
Provide a more friendly web-side drawing interface!
98 lines (94 loc) • 3.93 kB
HTML
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../../libs/easycss-1.3.1.min.css">
<link rel="stylesheet" href="../../libs/prettify.css">
<link rel="stylesheet" href="../../doc.css">
<script src="../../libs/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<header>
Matrix4矩阵
</header>
<p>
绘图的时候，比如动画效果中，可能需要整体或区域调整图形位置，还有就是在3D中，矩阵尤其重要，因此clay.js提供矩阵而不是单一的方法实现变换。
</p>
<pre class='prettyprint lang-js'>var matrix4=$$.Matrix4(initMatrix4);</pre>
<p>
Matrix4是一个列主序存储的4x4矩阵，使用该矩阵对象的第一步是像上面那样获取该对象，参数initMatrix4可选，你可以传递一个初始化矩阵或默认采用单位矩阵E初始化。
</p>
<h2>
基本运算
</h2>
<h4>
value
</h4>
<pre class='prettyprint lang-js'>var val=matrix4.value();</pre>
<p>
返回matrix4当前记录的内部矩阵，比如采用默认值初始化的矩阵对象，打印结果如下：
</p>
<pre class='prettyprint lang-js'>(16) [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]</pre>
<h4>
multiply
</h4>
<pre class='prettyprint lang-js'>matrix4.multiply(newMatrix4[, flag]);</pre>
<p>
二个矩阵相乘，第一个参数应该是一个和value打印出来一样格式的一维数组，列主序存储。返回矩阵对象。
</p>
<p>
flag默认false，可不传，表示左乘，即newMatrix4 × matrix4，如果设置flag为true，表示右乘。
</p>
<h4>
inverse
</h4>
<pre class='prettyprint lang-js'>matrix4.inverse();</pre>
<p>
把matrix4维护的矩阵求逆矩阵。返回矩阵对象。
</p>
<h4>
use
</h4>
<pre class='prettyprint lang-js'>var position=matrix4.use(x, y, z, w);</pre>
<p>
矩阵的目的是对坐标进行变换，use方法返回齐次坐标(x, y, z, w)经过matrix4矩阵变换后的坐标值。其中z和w可以不传递，默认0和1，返回的坐标值是一个齐次坐标。
</p>
<h2>
坐标变换
</h2>
<p>
坐标变换并不是直接计算出新的坐标，而是求解出记录着一系列变换的变换矩阵，计算出的变换矩阵应用到点上就可以求解出点变换后的位置。
</p>
<h4>
move
</h4>
<pre class='prettyprint lang-js'>matrix4.move(dis, a, b, c);</pre>
<p>
沿着向量(a, b, c)方向移动距离dis，其中c可以不传，默认0。返回变换矩阵。
</p>
<h4>
scale
</h4>
<pre class='prettyprint lang-js'>matrix4.scale(xTimes, yTimes, zTimes, cx, cy, cz);</pre>
<p>
以点(cx, cy, cz)为中心，分别在x、y和z方向上缩放xTimes、yTimes和zTimes倍，其中cx、cy和cz都可以不传递，默认0。返回变换矩阵。
</p>
<h4>
rotate
</h4>
<pre class='prettyprint lang-js'>matrix4.rotate(deg, a1, b1, c1, a2, b2, c2);</pre>
<p>
围绕射线(a1, b1, c1) -> (a2, b2, c2)旋转deg度，旋转单位为弧度，方向由右手法则确定。返回变换矩阵。
</p>
<p>
a1、b1、c1、a2、b2和c2这6个值在设置的时候，不是一定需要全部设置，有以下可选：
</p>
<ul>
<li>第一种：全部设置；</li>
<li>第二种：只设置了a1和b1，表示在xoy平面围绕（a1, b1）旋转；</li>
<li>第三种：只设置三个点(设置不足六个点都认为只设置了三个点)，表示围绕从原点出发的射线旋转。</li>
</ul>
</body>
</html>