Android Matrix 带你掌控雷电
chinajodte
8年前
<h2>Matrix 是什么</h2> <p>Matrix 拥有一个 3 * 3 矩阵，这个矩阵用于坐标变换。这个矩阵定义如下</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/43168e59f44829143cb0744f78dff3ec.png"></p> <p>Matrix.PNG</p> <p>Matrix 操作图像的 API 有平移（Translate），缩放（Scale），旋转（Rotate），错切（Skew），然而并没有对透视（Perspctive）的操作，Google 了关于 Matrix 的文章，MPERSP_0, MPERSP_1, MPERSP_2 分别为0，0，1，至于为什么，简单来看，就是为了用一个通用矩阵表示以上四种变换。</p> <p>下面先从数学角度推导下四种变换对应的 Matrix 是什么。</p> <h2>平移的矩阵</h2> <p>一个点 P 平移到 P' ，在坐标系表示如下</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/7320624771d87c47410682c9fa49cd16.png"></p> <p>Translate.PNG</p> <p>用数学公式表示</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/d01d15066f18d638c878ae4e25bee9fb.png"></p> <p>Translate_Math.PNG</p> <p>转换为坐标系表示</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/9aa00abc0135ad37582d50fbf5bf05d7.png"></p> <p>Translate_Matrix1.PNG</p> <p>中间的3 * 3 矩阵就是平移对应的 Matix ， ∆x 就是 x 轴的增量，∆y 就是 y 轴的增量。</p> <h2>旋转矩阵</h2> <p>旋转是有中心点的，如果把 Matrix 应用到图片，默认旋转点是图片的左上角，也就是图片的坐标原点(0，0)。</p> <h2>绕坐标原点旋转矩阵</h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/3ba1b2e28d4910e10a3bd75382103081.png"></p> <p>Rotate_XY.PNG</p> <p>用数学公式表示</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/2845ac5a9684ae6c6d906a47b56ef229.png"></p> <p>Rotate_Math.PNG</p> <p>用矩阵表示</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/e02601e3c5fa3d2c7cf7c871f194d7cc.png"></p> <p>Rotate_Matrix1.PNG</p> <p>中间的 3 * 3 矩阵就是绕坐标原点旋转的 Matrix。</p> <h2>绕非坐标原点旋转矩阵</h2> <p>如果图片并非绕它的坐标原点（左上角）旋转，而是绕任意点旋转，例如 图片中心点 （x1, y1），那么这个又如何计算呢？</p> <p>这里我们先用数学思维思考，我们可以把（x1,y1) 作为坐标原点，那么 P 的表示应该为 (x0-x1, y0-y1)，P' 的坐标为 (x-x1, y-y1)，那么我们再应用旋转点是坐标原点的矩阵公式，就应该这样写</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/95f2ce73bb8bf6c6a3aa01c2210858c5.png"></p> <p>Rotate_Matrix1.PNG</p> <p>再简化下</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/0e5e9048e6463ad848cf33c64c057c39.png"></p> <p>Rotate_Matrix2.PNG</p> <p>是不是现在感觉比较明朗，等式右边第一个和第三个矩阵就是平移矩阵，我们在后面会看到如何生成这三个矩阵的结果。</p> <p>我们再来理解下这个矩阵，最后两个矩阵相乘代表坐标原点移动到(x1,y1)，最后三个矩阵代表以(x1, y1)为原点旋转，最后四个矩阵代表坐标原点从(x1, y1)移动到（0，0），这样是不是好记一些。</p> <h2>缩放矩阵</h2> <p>图片都是由像素点构成的，如果一个图片放大 k 倍，可以看作每个点的 x 和 y 坐标值放大 k 倍。当然缩放也有中心点的。图片默认的缩放中心为图片的左上角，也就是图片的原点（0，0）。</p> <h2>原点为中心的缩放</h2> <p>用数学表示如下</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/72c2a66938f8227a87aded1bf02266de.png"></p> <p>Scale_Math.PNG</p> <p>用矩阵表示如下</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/d0cdd57d9920072b0b2846a184f9ae84.png"></p> <p>Scale_Matrix.PNG</p> <p>中间的矩阵就是绕原点绽放的 Matrix</p> <h2>非原点的缩放</h2> <p>这与非原点的旋转的数学思维是一样的，这里直接给出矩阵</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/65f286feb5c427facb5c263bcf8806ad.png"></p> <p>Scale_Matrix1.PNG</p> <p>中间的三个矩阵相乘就是非原点缩放 Matrix</p> <h2>错切矩阵</h2> <p>错切分为 x 轴和 y 轴的错切。</p> <h2>x 轴错切矩阵</h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/d3e12bf61731edf41914d5f422131f96.png"></p> <p>Skew_X.PNG</p> <p>x 轴错切，是保持坐标的 y 轴值不变，x 轴值的做线性变换 ，表示如下</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/49dc466d40424c2c45c7598f64c65c6e.png"></p> <p>Skew_Math.PNG</p> <p>斜率为 1/k</p> <p>矩阵表示如下</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/8ad8864bfd2d03042d85bbbc12d8edb6.png"></p> <p>Skew_MatrixX.PNG</p> <p>矩阵表示用到的是 k，而不是斜率 1 / k，因此 k 越大，图形错切的越大。</p> <h2>y 轴错切矩阵</h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/83e4cdd347425acd01470c26273a00b6.png"></p> <p>Skew_Y.PNG</p> <p>y轴错切，就是 x 轴的值不变，y 轴的值做线性变换，矩阵就不用我再推理吧，表示如下</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/1a248b409c2e7dc5bef55d632e28e378.png"></p> <p>Skew_MatrixY.PNG</p> <h2>x 轴 y 轴的错切矩阵</h2> <p>综合 x 轴 和 y 轴错切，统一表示如下</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/a4eea77e2a95986eeeee11da5854dc0d.png"></p> <p>Skew_MatrixXY.PNG</p> <p>kx 表示 x 轴的错切值，ky 表示 y 轴的错切值。kx，ky 越大，图形错切的越大。</p> <p>看完了可恶的数学公式，我们就懂得了原理 ，现在用 Matrix 的 API 来测试测试吧。</p> <p>每种变换都有 setXx() ，postXx()，preXx() 方法来设置相应的变换 。如 Translate，有 Matrix.setTranslate()，Matirx.postTranslate()，Matrix.preTranslate()。我将会在代码中解释这些到底怎么用，请大家多注意，因为大部分人会用错。</p> <h2>默认显示一个 launcher 图标</h2> <p>我们先显示一个不做 Matrix 处理的图标</p> <pre> <code class="language-java">/** * Created by David Chow on 2016/12/6. */ public class MatrixView extends View { private Matrix mMatrix; private Bitmap mBitmap; public MatrixView(Context context) { this(context, null); } public MatrixView(Context context, AttributeSet attrs) { super(context, attrs); init(); } private void init() { mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher); mMatrix = new Matrix(); Log.d("david", mMatrix.toString()); } @Override protected void onDraw(Canvas canvas) { canvas.drawBitmap(mBitmap, mMatrix, null); } }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/b7a1bf14baa1cff2e1d6218c861f6f95.png"></p> <p style="text-align:center">Default.PNG</p> <p>我们看看这个初始的 Matrix 矩阵是什么</p> <pre> <code class="language-java">Matrix{[1.0, 0.0, 0.0][0.0, 1.0, 0.0][0.0, 0.0, 1.0]}</code></pre> <p>这就是一个 3 * 3 单位矩阵 ，因此它不论前乘还是后乘都无所谓。</p> <h2>平移</h2> <pre> <code class="language-java">@Override protected void onDraw(Canvas canvas) { mMatrix.setTranslate(200, 200); // 单位 pixel canvas.drawBitmap(mBitmap, mMatrix, null); Log.d("david", "translate matrix : " + mMatrix.toString()); }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/abc034399626f26a5c71f6e5bab85653.png"></p> <p style="text-align:center">Translate.PNG</p> <p>我们看到了图像平移了，这个时候，我们打印 Log，可以看到矩阵的值为</p> <pre> <code class="language-java">translate matrix : Matrix{[1.0, 0.0, 200.0][0.0, 1.0, 200.0][0.0, 0.0, 1.0]}</code></pre> <p>我们可以看到 Matrix.setTranslate() 把单位矩阵重置为 平移的矩阵（上面数学分析得出的平移矩阵）</p> <p>那么用理论的的矩阵这样表示</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/f1d97ff9305f77b9f219f8f9685ee684.png"></p> <p>Translate.PNG</p> <p>这样与我们上面理论是不是就一致了，这个时候我们心情是不是稍微好点了，因为我们理论终于在实际中得到验证了。后面我们将不再去这个用矩阵来验证理论，我们只打印相应的 Log 即可。</p> <h2>缩放</h2> <pre> <code class="language-java">@Override protected void onDraw(Canvas canvas) { mMatrix.setTranslate(200, 200); // 单位 pixel mMatrix.setScale(3, 3); canvas.drawBitmap(mBitmap, mMatrix, null); Log.d("david", mMatrix.toString()); }</code></pre> <p>Log打印如下</p> <pre> <code class="language-java">Matrix{[3.0, 0.0, 0.0][0.0, 3.0, 0.0][0.0, 0.0, 1.0]}</code></pre> <p>就算我们先用了一个无关的 Matrix.setTranslate() ， 后面的 Matrix.setScale() 还是会重置矩阵为缩放的矩阵。这点大家要记住，免得以后没有达到效果，却不知道问题在哪里了。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/050c42a8a5a8ed42b11947c8523eeb59.png"></p> <p style="text-align:center">Scale.PNG</p> <p>默认的缩放中心是图片的左上角，也就是(0,0)，当然我们也可以调整缩放中心位置</p> <pre> <code class="language-java">@Override protected void onDraw(Canvas canvas) { mMatrix.setScale(3, 3,mBitmap.getWidth()/2,mBitmap.getHeight()/2); canvas.drawBitmap(mBitmap, mMatrix, null); Log.d("david", mMatrix.toString()); }</code></pre> <p>现在缩放中心的位置为 Bitmap 的中心位置，现在看下效果</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/dcb80679e843d065e2c3e112737ce876.png"></p> <p style="text-align:center">Scale1.PNG</p> <p>从效果看，确实是根据中心点缩放，以致图片的左上角超出了屏幕显示。</p> <p>我们打印Log看下</p> <pre> <code class="language-java">Matrix{[3.0, 0.0, -126.0][0.0, 3.0, -126.0][0.0, 0.0, 1.0]}</code></pre> <p>那么与我们上面理论分析是不是相符，就留给大家去验证了。</p> <h2>Matrix.setRotate()旋转</h2> <p>旋转也是有中心点的，先看看个绕图片中心旋转的情况</p> <pre> <code class="language-java">@Override protected void onDraw(Canvas canvas) { mMatrix.setRotate(45, mBitmap.getWidth() / 2, mBitmap.getHeight() / 2); canvas.drawBitmap(mBitmap, mMatrix, null); }</code></pre> <p>Log打印如下</p> <pre> <code class="language-java">Matrix{[0.70710677, -0.70710677, 63.0][0.70710677, 0.70710677, -26.095451][0.0, 0.0, 1.0]}</code></pre> <p>验证理论还是交给大家了~~</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/689dd86a77da4be55594db2c9ea07a25.png"></p> <p style="text-align:center">Rotate_Default.png</p> <p>当然默认的旋转中心也是图片的左上角</p> <pre> <code class="language-java">@Override protected void onDraw(Canvas canvas) { mMatrix.setTranslate(200, 200); // 单位 pixel mMatrix.setScale(3, 3); mMatrix.setRotate(30); canvas.drawBitmap(mBitmap, mMatrix, null); Log.d("david", mMatrix.toString()); }</code></pre> <p>同样，setRotate() 覆盖了前面的 setScale(), setTranslate()</p> <p>打印下矩阵信息</p> <pre> <code class="language-java">Matrix{[0.8660254, -0.5, 0.0][0.5, 0.8660254, 0.0][0.0, 0.0, 1.0]}</code></pre> <p>根据我们上面讲的，这个里面的小数值 ，对应角度为 30 的 sin 或者 cos 值，大家可以自己用计算器算算~~</p> <p>现在看下效果图</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/ba6a5c8e3143d7c4406ea6692fb74ff0.png"></p> <p style="text-align:center">Rotate.PNG</p> <p>我们发现这个移出了屏幕了，因此现在我们来平移下</p> <pre> <code class="language-java">@Override protected void onDraw(Canvas canvas) { mMatrix.setTranslate(200, 200); // 单位 pixel mMatrix.setScale(3, 3); mMatrix.setRotate(30); mMatrix.preTranslate(200, 200); canvas.drawBitmap(mBitmap, mMatrix, null); Log.d("david", mMatrix.toString()); }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/82e425eef1a37149acb67d03d3dfe4c6.png"></p> <p style="text-align:center">Rotate_Translate_Error.PNG</p> <p>一个奇怪的现象就产生了，X 方向的平移呢？其实这是因为矩阵乘法不满足交换律的原因。 mMatrix.preTranslate() 意思是用 mMatrix 矩阵前乘 translate 矩阵，数据表示如下</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/435349afbb7ec4ca92d3758bd2d73a43.png"></p> <p>Rotate_Translate.png</p> <p>这个结果就不用我算了吧，很显然实际偏移的并不是200，200。那么我们如何让它既旋转30°，又正常偏移200,200呢。 我们可以让 mMatrix 后乘 translate</p> <pre> <code class="language-java">@Override protected void onDraw(Canvas canvas) { canvas.drawLine(0, 0, 200, 200, mPaint); mMatrix.setRotate(30); mMatrix.postTranslate(200, 200); canvas.drawBitmap(mBitmap, mMatrix, null); }</code></pre> <p>为了看到我们确实是偏移了200,200，我画了一条红色的线</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/3df336bf28e9cb0aacaa92ae1f2177b2.png"></p> <p style="text-align:center">Rotate_PostTranslate.png</p> <p>那么我们用数学来表达下</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/3f2950ac4eaea3f47baf53eeeb590e86.png"></p> <p>Post_Translate.png</p> <p>大家计算下，是不是既旋转了又平移了200,200？</p> <p>我用这个例子是为了让大家理解 preXx() 和 postXx() 的区别，希望大家自己动手试试加深理解。</p> <p>再给大家一个 Tip，如果想要平移达到效果，最后调用 postTranslate()。</p> <h2>Matrix.setSkew() 错切</h2> <p>先用默认中心点，即图片的左上角进行错切。为了看到效果，我们先平移200,200，再进行错切变换</p> <pre> <code class="language-java">mMatrix.setTranslate(200, 200); mMatrix.preSkew(1, 0); canvas.drawBitmap(mBitmap, mMatrix, null);</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/e872fa0a60f11fc1f65076a0210528a3.png"></p> <p style="text-align:center">Skew.png</p> <p>这里我并没有遵循上面的例子最后用 postTranslate()，这是因为根据矩阵的特性，这样刚好不影响平移，我们可以打印Log看看矩阵</p> <pre> <code class="language-java">Matrix{[1.0, 1.0, 200.0][0.0, 1.0, 200.0][0.0, 0.0, 1.0]}</code></pre> <p>我没说错吧，但是如果你再操作下，就有问题了，例如例如 postScale(3,3)，就会平移 600,600了。当然如果你最后还是调用 postTranslate(200，200) ，会正常平移400，400。</p> <p>大家别看我说的很简单，自动写的时候就会遇到各种问题，因此大家在看的时候还是多动手。</p> <p>再看看中心点不是原点的错切，例如用图片的左下角来错切。</p> <pre> <code class="language-java">@Override protected void onDraw(Canvas canvas) { mMatrix.setTranslate(200, 200); mMatrix.preSkew(1, 0, 0, mBitmap.getHeight()); canvas.drawBitmap(mBitmap, mMatrix, null); Log.d("david", mMatrix.toString()); }</code></pre> <p>打印Log</p> <pre> <code class="language-java">Matrix{[1.0, 1.0, 74.0][0.0, 1.0, 200.0][0.0, 0.0, 1.0]}</code></pre> <p>理论验证继续留给大家了~~</p> <h2>思考</h2> <p>我们使用 Matrix API 的时候，我们只是一名 Developer，但是我们要把自己当做一个 Designer，我们思考下，其实我们可以利用矩阵做很多想要的效果，因为我们可以用 Matrix.setValues() 来设置自己想要的矩阵 ，因此我们可以设计对称效果，倒影效果等等，这就要大家去发掘啦~~</p> <h2>结束</h2> <p>这篇文章大家入门 Matrix，当然这是为了我后面文章打基础的，还是那句话，多动手，如果遇到问题解决不了，欢迎大家留言讨论。 如果大家觉得还不错，可以点个赞，甚至来一波关注不惜留恋_， what's a nice day~~</p> <p> </p> <p>来自：http://www.jianshu.com/p/b8cc4ac9780b</p> <p> </p>