diff --git a/CustomView/Advance/[11]Matrix_3D_Camera.md b/CustomView/Advance/[11]Matrix_3D_Camera.md index 8a57de2..3525abe 100644 --- a/CustomView/Advance/[11]Matrix_3D_Camera.md +++ b/CustomView/Advance/[11]Matrix_3D_Camera.md @@ -15,8 +15,8 @@ | ---- | ---------------------------------------- | -------------- | | 基本方法 | save、restore | 保存、 回滚 | | 常用方法 | getMatrix、applyToCanvas | 获取Matrix、应用到画布 | -| 旋转 | rotat (API 21)、rotateX、rotateY、rotateZ | 各种旋转 | | 平移 | translate | 位移 | +| 旋转 | rotat (API 21)、rotateX、rotateY、rotateZ | 各种旋转 | | 相机位置 | setLocation (API 12)、getLocationX (API 16)、getLocationY (API 16)、getLocationZ (API 16) | 设置与获取相机位置 | > Camera的方法并不是特别多,很多内容与之前的讲解的Canvas和Matrix类似,不过又稍有不同,之前的画布操作和Matrix主要是作用于2D空间,而Camera则主要作用于3D空间。 @@ -35,7 +35,7 @@ > 至于为什么要用左手坐标系呢?~~大概是因为赶工的时候右手不方便比划吧,大雾。~~实际上不同平台上使用的坐标系也有不同,有的是左手,有的是右手,貌似并没有统一的标准,只需要记住 Android 平台上面使用的是左手坐标系即可。 -不过此处需要注意一下 Android 中 2D坐标系 和 3D坐标系 的一些差别。 +**2D 和 3D 坐标是通过Matrix关联起来的,所以你可以认为两者是同一个坐标系,但又有差别,重点就是y轴方向不同。** | 坐标系 | 2D坐标系 | 3D坐标系 | | ------- | :---: | :----: | @@ -46,7 +46,7 @@ 3D坐标系在屏幕中各个坐标轴默认方向展示: -> 注意y轴默认方向是向上,而2D则是向下。 +> 注意y轴默认方向是向上,而2D则是向下,另外本图不代表3D坐标系实际位置。 ![](http://ww1.sinaimg.cn/large/005Xtdi2jw1f7nxn8hcqqj308c0ea74a.jpg) @@ -65,7 +65,13 @@ #### 摄像机 -如果你了解过Unity,那么你对摄像机这一个概念应该会理解的比较透彻。在一个虚拟的3D的立体空间中,由于我们无法直接用眼睛去观察这一个空间,所以要借助摄像机采集信息,制成2D影像供我们观察。简单来说,**摄像机就是我们观察虚拟3D空间的眼睛**。 +如果你学过Unity,那么你对摄像机这一个概念应该会有比较透彻的理解。在一个虚拟的3D的立体空间中,由于我们无法直接用眼睛去观察这一个空间,所以要借助摄像机采集信息,制成2D影像供我们观察。简单来说,**摄像机就是我们观察虚拟3D空间的眼睛**。 + +**Android 上面观察View的摄像机默认位置在屏幕左上角,而且是距屏幕有一段距离的,假设灰色部分是手机屏幕,白色是上面的一个View,摄像机位置看起来大致就是下面这样子的(为了更好的展示摄像机的位置,做了一个空间转换效果的动图)。** + +![](http://ww4.sinaimg.cn/large/005Xtdi2jw1f7q71yek4wg308c058go5.gif) + +> 摄像机的位置默认是 (0, 0, -576)。其中 -576= -8 x 72,虽然官方文档说距离屏幕的距离是 -8, 但经过测试实际距离是 -576 像素,当距离为 -10 的时候,实际距离为 -720 像素。不过这个数值72我也不明白是什么东西,我使用了3款手机测试,屏幕大小和像素密度均不同,但结果都是一样的,知道的小伙伴可以告诉我一声。 @@ -103,9 +109,103 @@ void applyToCanvas (Canvas canvas) -## 旋转方法 +## 平移 + +> **声明:以下示例中 Matrix 的平移均使用 postTranslate 来演示,实际情况中使用set、pre 或 post 需要视情况而定。** + +```java +void translate (float x, float y, float z) +``` + +和2D平移类似,只不过是多出来了一个维度,从只能在2D平面上平移到在3D空间内平移,不过,此处仍有几个要点需要重点对待。 + + + +#### 沿x轴平移 + + +``` java +camera.translate(x, 0, 0); + +matrix.postTranslate(x, 0); +``` + +两者x轴同向,所以 Camera 和 Matrix 在沿x轴平移上是一致的。 + +**结论:** + +一致是指平移方向和平移距离一致,在默认情况下,上面两种均可以让坐标系向右移动x个单位。 + + + +#### 沿y轴平移 + +这个就有点意思了,两个坐标系相互关联,但是两者的y轴方向是相反的,很容易把人搞迷糊。你可以这么玩: + +```java +Camera camera = new Camera(); +camera.translate(0, 100, 0); // camera - 沿y轴正方向平移100像素 + +Matrix matrix = new Matrix(); +camera.getMatrix(matrix); +matrix.postTranslate(0,100); // matrix - 沿y轴正方向平移100像素 + +Log.i(TAG, "Matrix: "+matrix.toShortString()); +``` + +在上面这种写法,虽然用了5行代码,但是效果却和 `Matrix matrix = new Matrix();` 一样,结果都是单位矩阵。而且看起来貌似没有啥问题,毕竟两次平移都是正向100。(~~如果遇见不懂技术的领导嫌你写代码量少,你可以这样多写几遍,反正一般人是看不出问题的。~~) + +``` +Matrix: [1.0, 0.0, 0.0][0.0, 1.0, 0.0][0.0, 0.0, 1.0] +``` + +**结论:** + +由于两者y轴相反,所以 `camera.translate(0, -y, 0);` 与 `matrix.postTranslate(0, y);`平移方向和距离一致,在默认情况下,这两种方法均可以让坐标系向下移动y个单位。 + + + +#### 沿z轴平移 + +这个不仅有趣,还容易蒙逼,上面两种情况再怎么闹腾也只是在2D平面上,而z轴的出现则让其有了空间感。 + +**当View和摄像机在同一条直线上时:** 此时沿z轴平移相当于缩放的效果,缩放中心为摄像机所在(x, y)坐标,当View接近摄像机时,看起来会变大,远离摄像机时,看起来会变小,**近大远小**。 + +**当View和摄像机不在同一条直线上时:** 当View远离摄像机的时候,View在缩小的同时也在不断接近摄像机在屏幕投影位置(通常情况下为Z轴,在平面上表现为接近坐标原点)。相反,当View接近摄像机的时候,View在放大的同时会远离摄像机在屏幕投影位置。 + + + +我知道,这样说你们肯定是蒙逼的,话说为啥远离摄像机的时候会接近摄像机在屏幕投影位置,而接近摄像机的时候会远离摄像机在屏幕投影位置 (´・_・`),肯定觉得我在逗你们玩,完全是前后矛盾,逻辑都不通,不过这个在这里的确是不矛盾的,因为远离是在3D空间里的情况,而接近只是在2D空间的投影,看下图。 + +> 假设大矩形是手机屏幕,摄像机位于屏幕左上角,请注意上面View与摄像机的距离以及下方View的大小以及距离左上角的距离。 + +![](http://ww3.sinaimg.cn/large/005Xtdi2jw1f7qerbksn4g30dc0ct7vt.gif) + +至于为什么会这样,因为我们人眼视觉就是这样的,当我们看向远方的时候,视线最终都会消失在视平线上,如果你站在两条平行线中间,看起来它们会在远方(视平线上)相交,虽然在3D空间上两者距离不变,但在2D投影上却是越来越接近,如下图(图片来自网络): + +![](http://ww2.sinaimg.cn/large/005Xtdi2jw1f7qf2vug02j308c08ct9w.jpg) + +**结论:** + +关于3D效果的平移说起来比较麻烦,但你可以自己实际的体验一下,毕竟我们是生活在3D空间的,拿一张纸片来模拟View,用眼睛当做摄像机,在眼前来回移动纸片,多试几次大致就明白是怎么回事了。 + +| 平移 | 重点内容 | +| :--: | ----------- | +| x轴 | 2D 和 3D 相同。 | +| y轴 | 2D 和 3D 相反。 | +| z轴 | 近大远小、视线相交。 | + + + +## 旋转 + +旋转是Camera制作3D效果的核心,不过它制作出来的并不能算是真正的3D,而是伪3D,因为View是没有厚度的,想要展示出立体效果一般需要两个View进行配合, + + + +## 核心要点 + -旋转是Camera制作3D效果的核心(其实从),不过它制作出来的并不能算是真正的3D,而是伪3D,因为没有厚度, ## About Me