Skip to content

Commit 7cf4b83

Browse files
GcsSloopGcsSloop
committed
Update
1 parent efc3bff commit 7cf4b83

2 files changed

Lines changed: 127 additions & 17 deletions

File tree

‎CustomView/Advance/[10]Matrix_Method.md‎

Lines changed: 117 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,16 @@
99

1010
按照惯例，先放方法表做概览。
1111

12-
| 方法类别 | 相关API | 摘要 |
13-
| :------: | ---------------------------------------- | :------------------------- |
12+
| 方法类别 | 相关API | 摘要 |
13+
| -------- | ---------------------------------------- | -------------------------- |
14+
| 基本方法 | equals hashCode toString toShortString | 比较、 获取哈希值、 转换为字符串 |
15+
| 数值操作 | set reset setValues getValues | 设置、 重置、 设置数值、 获取数值 |
16+
| 数值计算 | mapPoints mapRadius mapRect mapVectors | 计算变换后的数值 |
1417
| 设置(set) | setConcat setRotate setScale setSkew setTranslate | 设置变换 |
1518
| 前乘(pre) | preConcat preRotate preScale preSkew preTranslate | 前乘变换 |
1619
| 后乘(post) | postConcat postRotate postScale postSkew postTranslate | 后乘变换 |
17-
| 特殊方法 | setPolyToPoly setRectToRect rectStaysRect setSinCos | 一些特殊操作 |
18-
| 矩阵相关 | invert isAffine isIdentity | 求逆矩阵、 是否为仿射矩阵、 是否为单位矩阵 ... |
20+
| 特殊方法 | setPolyToPoly setRectToRect rectStaysRect setSinCos | 一些特殊操作 |
21+
| 矩阵相关 | invert isAffine isIdentity | 求逆矩阵、 是否为仿射矩阵、 是否为单位矩阵 ... |
1922

2023

2124
## Matrix方法详解
@@ -419,12 +422,12 @@ Poly全称是Polygon，多边形的意思，了解了意思大致就能知道这
419422
简单示例:
420423
421424
```java
422-
public class MstrixSetPolyToPolyTest extends View {
425+
public class MatrixSetPolyToPolyTest extends View {
423426
424427
private Bitmap mBitmap; // 要绘制的图片
425428
private Matrix mPolyMatrix; // 测试setPolyToPoly用的Matrix
426429
427-
public MstrixSetPolyToPolyTest(Context context) {
430+
public MatrixSetPolyToPolyTest(Context context) {
428431
super(context);
429432
430433
initBitmapAndMatrix();
@@ -450,7 +453,7 @@ public class MstrixSetPolyToPolyTest extends View {
450453
// 核心要点
451454
mPolyMatrix.setPolyToPoly(src, 0, dst, 0, src.length >> 1); // src.length >> 1 为位移运算 相当于处以2
452455
453-
// 此处为了更好的显示对图片进行了等比缩放和平移
456+
// 此处为了更好的显示对图片进行了等比缩放和平移(图片本身有点大)
454457
mPolyMatrix.postScale(0.26f, 0.26f);
455458
mPolyMatrix.postTranslate(0,200);
456459
}
@@ -465,12 +468,119 @@ public class MstrixSetPolyToPolyTest extends View {
465468
}
466469
```
467470
471+
![](http://ww3.sinaimg.cn/large/005Xtdi2jw1f730v51dowj308c0etgm0.jpg)
468472
469473
474+
475+
> **用setPolyToPoly这个方法可以制造类似于3D的透视效果。**
476+
477+
478+
479+
**2.setRectToRect**
480+
481+
```JAVA
482+
boolean setRectToRect (RectF src, // 源区域
483+
RectF dst, // 目标区域
484+
Matrix.ScaleToFit stf) // 缩放适配模式
485+
```
486+
487+
简单来说就是将源矩形的内容填充到目标矩形中，然而在大多数的情况下，源矩形和目标矩形的长宽比是不一致的，到底该如何填充呢，这个填充的模式就由第三个参数 `stf` 来确定。
488+
489+
ScaleToFit 是一个枚举类型，共包含了四种模式:
490+
491+
| 模式 | 摘要 |
492+
| ------ | -------------------------- |
493+
| CENTER | 居中，对src等比例缩放，将其居中放置在dst中。 |
494+
| START | 顶部，对src等比例缩放，将其放置在dst的左上角。 |
495+
| END | 底部，对src等比例缩放，将其放置在dst的右下角。 |
496+
| FILL | 充满，拉伸src的宽和高，使其完全填充满dst。 |
497+
498+
下面我们看一下不同宽高比的src与dst在不同模式下是怎样的。
499+
500+
> 假设灰色部分是dst，橙色部分是src，由于是测试不同宽高比，示例中让dst保持不变，看两种宽高比的src在不同模式下填充的位置。
501+
502+
| 状态 src | ![](http://ww3.sinaimg.cn/large/005Xtdi2jw1f737xedthmj308c050glf.jpg) |
503+
| ------- | :--------------------------------------: |
504+
| CENTER | ![](http://ww1.sinaimg.cn/large/005Xtdi2jw1f737xqulh9j308c050t8k.jpg) |
505+
| START | ![](http://ww1.sinaimg.cn/large/005Xtdi2jw1f737y0ts9oj308c050glg.jpg) |
506+
| END | ![](http://ww2.sinaimg.cn/large/005Xtdi2jw1f737zi7tm1j308c050a9w.jpg) |
507+
| FILL | ![](http://ww3.sinaimg.cn/large/005Xtdi2jw1f737yj8pcrj308c0500sl.jpg) |
508+
509+
510+
511+
下面用代码演示一下居中的示例:
512+
513+
```java
514+
public class MatrixSetRectToRectTest extends View {
515+
516+
private static final String TAG = "MatrixSetRectToRectTest";
517+
518+
private int mViewWidth, mViewHeight;
519+
520+
private Bitmap mBitmap; // 要绘制的图片
521+
private Matrix mRectMatrix; // 测试etRectToRect用的Matrix
522+
523+
public MatrixSetRectToRectTest(Context context) {
524+
super(context);
525+
526+
mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.rect_test);
527+
mRectMatrix = new Matrix();
528+
}
529+
530+
@Override
531+
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
532+
super.onSizeChanged(w, h, oldw, oldh);
533+
mViewWidth = w;
534+
mViewHeight = h;
535+
536+
}
537+
538+
@Override
539+
protected void onDraw(Canvas canvas) {
540+
super.onDraw(canvas);
541+
542+
RectF src= new RectF(0, 0, mBitmap.getWidth(), mBitmap.getHeight() );
543+
RectF dst = new RectF(0, 0, mViewWidth, mViewHeight );
544+
545+
// 核心要点
546+
mRectMatrix.setRectToRect(src,dst, Matrix.ScaleToFit.CENTER);
547+
548+
// 根据Matrix绘制一个变换后的图片
549+
canvas.drawBitmap(mBitmap, mRectMatrix, new Paint());
550+
}
551+
}
552+
```
553+
554+
![](http://ww4.sinaimg.cn/large/005Xtdi2jw1f7385r77wmj308c0etgm8.jpg)
555+
556+
557+
558+
**3.rectStaysRect**
559+
560+
判断矩形经过变换后是否仍为矩形，假如Matrix进行了平移、缩放则画布仅仅是位置和大小改变，矩形变换后仍然为矩形，但Matrix进行了非90度倍数的旋转或者错切，则矩形变换后就不再是矩形了，这个很好理解，不过多赘述，顺便说一下，前面的`mapRect`方法的返回值就是`rectStaysRect`的返回值。
561+
562+
563+
564+
**4.setSinCos**
565+
566+
设置sinCos值，这个是控制Matrix旋转的，由于Matrix已经封装好了Rotate方法，所以这个并不常用，也不过多讲解。
567+
470568
### 矩阵相关
471569
570+
矩阵相关的函数就属于哪一种非常靠近底层的东西了，向我们做App的一般不需要直接接触到这些东西，想要弄明白这个可以回去请教你们的线性代数老师，这里仅作概述。
571+
572+
| 方法 | 摘要 |
573+
| ---------- | -------------- |
574+
| invert | 求矩阵的逆矩阵 |
575+
| isAffine | 判断当前矩阵是否为仿射矩阵。 |
576+
| isIdentity | 判断当前矩阵是否为单位矩阵。 |
577+
472578
## Matrix实用技巧
473579
580+
通过前面的代码和示例，我们已经了解了Matrix大部分方法是如何使用的，这些基本的原理和方法通过组合可能会创造出神奇的东西，下面我就简要介绍几种我想到的小技巧，更多的大家可以开启自己的脑洞来发挥。
581+
582+
### 1.根据位置绘制不同的内容
583+
474584
## About
475585
476586
## 参考资料

‎QuickChart/Matrix.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
# Matrix常用操作速查表
22

3-
方法类别 | 相关API | 摘要
4-
-----------|---------------------------------------------------------|------------------------
5-
基本方法 | equals hashCode toString toShortString | 比较、 获取哈希值、 转换为字符串
6-
数值操作 | set reset setValues getValues | 设置、 重置、 设置数值、 获取数值
7-
数值计算 | mapPoints mapRadius mapRect mapVectors | 计算变换后的数值
8-
设置(set) | setConcat setRotate setScale setSkew setTranslate | 设置变换
9-
前乘(pre) | preConcat preRotate preScale preSkew preTranslate | 前乘变换
10-
后乘(post) | postConcat postRotate postScale postSkew postTranslate | 后乘变换
11-
特殊方法 | setPolyToPoly setRectToRect rectStaysRect setSinCos | 一些特殊操作
12-
矩阵相关 | invert isAffine isIdentity | 求逆矩阵、 是否为仿射矩阵、 是否为单位矩阵 ...
3+
| 方法类别 | 相关API | 摘要 |
4+
| -------- | ---------------------------------------- | -------------------------- |
5+
| 基本方法 | equals hashCode toString toShortString | 比较、 获取哈希值、 转换为字符串 |
6+
| 数值操作 | set reset setValues getValues | 设置、 重置、 设置数值、 获取数值 |
7+
| 数值计算 | mapPoints mapRadius mapRect mapVectors | 计算变换后的数值 |
8+
| 设置(set) | setConcat setRotate setScale setSkew setTranslate | 设置变换 |
9+
| 前乘(pre) | preConcat preRotate preScale preSkew preTranslate | 前乘变换 |
10+
| 后乘(post) | postConcat postRotate postScale postSkew postTranslate | 后乘变换 |
11+
| 特殊方法 | setPolyToPoly setRectToRect rectStaysRect setSinCos | 一些特殊操作 |
12+
| 矩阵相关 | invert isAffine isIdentity | 求逆矩阵、 是否为仿射矩阵、 是否为单位矩阵 ... |
1313

1414
## 相关文章
1515

0 commit comments

Comments
 (0)