基礎篇
一、坐標系
1、屏幕坐標系和數學坐標系的區別
由于移動設備一般定義屏幕左上角為坐標原點,向右為x軸增大方向,向下為y軸增大方向, 所以在手機屏幕上的坐標系與數學中常見的坐標系是稍微有點差別的。下圖為屏幕坐標系:
2、View的坐標系
注意:View的坐標系統是相對于父控件而言的。如下圖所示:
- getTop(); //獲取子View左上角距父View頂部的距離
- getLeft(); //獲取子View左上角距父View左側的距離
- getBottom(); //獲取子View右下角距父View頂部的距離
- getRight(); //獲取子View右下角距父View左側的距離
3、MotionEvent中 get 和 getRaw 的區別
- event.getX(); //觸摸點相對于其所在組件坐標系的坐標
- event.getY();
- event.getRawX(); //觸摸點相對于屏幕默認坐標系的坐標
- event.getRawY();
如下圖所示,其中相同顏色的內容是對應的,其中為了顯示方便,藍色箭頭向左稍微偏移了一點.
4、核心要點
二、角度與弧度
安卓中角度(angle)與弧度(radian)的有關問題。
1、前言
①、為什么講這個?
在我們自定義View,尤其是制作一些復雜炫酷的效果的時候,實際上是將一些簡單的東西通過數學上精密的計算組合到一起形成的效果。
這其中可能會涉及到畫布的相關操作(旋轉),以及一些正余弦函數的計算等,這些內容就會用到一些角度、弧度相關的知識。
②、為什么對角的描述存在角度與弧度兩種單位?
簡單來說就是為了方便,為了精確描述一個角的大小引入了角度與弧度的概念。
由于兩者進制是不同的(角度是60進制,弧度是10進制),在合適的地方使用合適的單位來描述會更加方便。
例如: 角度是60進位制,遇到30°6′這樣的角,應該轉化為10進制的30.1°。但弧度就不需要,因為弧度本身就是十進制的實數。
2、角度與弧度的定義
角度和弧度一樣都是描述角的一種度量單位,下面是它們的定義:
角度:
兩條射線從圓心向圓周射出,形成一個夾角和夾角正對的一段弧。當這段弧長正好等于圓周長的360分之一時,兩條射線的夾角的大小為1度。
弧度:
兩條射線從圓心向圓周射出,形成一個夾角和夾角正對的一段弧。當這段弧長正好等于圓的半徑時,兩條射線的夾角大小為1弧度.
3、角度和弧度的換算關系
rad 是弧度, deg 是角度
4、一些細節問題
由于默認屏幕坐標系和常見數學坐標系的小差別(坐標系問題點這里),所以在角上必然也會存在一些區別,例如:
在常見的數學坐標系中角度增大方向為逆時針,
在默認的屏幕坐標系中角度增大方向為順時針。
三、顏色
簡要介紹安卓中的顏色相關內容,包括顏色的定義,創建顏色的幾種方式,以及顏色的混合模式等
1、簡單介紹顏色
安卓支持的顏色模式:
PS:其中字母表示通道類型,數值表示該類型用多少位二進制來描述。如ARGB8888則表示有四個通道(ARGB),每個對應的通道均用8位來描述。
注意:我們常用的是ARGB8888和ARGB4444,而在所有的安卓設備屏幕上默認的模式都是RGB565,請留意這一點。
以ARGB8888為例介紹顏色定義:
其中 A R G B 的取值范圍均為0255(即16進制的0x000xff)
A 從ox00到oxff表示從透明到不透明。
RGB 從0x00到0xff表示顏色從淺到深。
當RGB全取最小值(0或0x000000)時顏色為黑色,全取最大值(255或0xffffff)時顏色為白色。
2、幾種創建或使用顏色的方式
①、java中定義顏色
int color = Color.GRAY; //灰色
由于Color類提供的顏色僅為有限的幾個,通常還是用ARGB值進行表示。
int color = Color.argb(127, 255, 0, 0); //半透明紅色
int color = 0xaaff0000; //帶有透明度的紅色
②、在xml文件中定義顏色
在/res/values/color.xml 文件中如下定義:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="red">#ff0000</color>
<color name="green">#00ff00</color>
</resources>
詳解: 在以上xml文件中定義了兩個顏色,紅色和綠色,是沒有alpha(透明)通道的。
定義顏色以‘#’開頭,后面跟十六進制的值,有如下幾種定義方式:
#f00 //低精度 - 不帶透明通道紅色
#af00 //低精度 - 帶透明通道紅色
#ff0000 //高精度 - 不帶透明通道紅色
#aaff0000 //高精度 - 帶透明通道紅色
③、在java文件中引用xml中定義的顏色:
int color = getResources().getColor(R.color.mycolor);
④、在xml文件(layout或style)中引用或者創建顏色
<!--在style文件中引用-->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/red</item>
</style>
android:background="@color/red" //引用在/res/values/color.xml 中定義的顏色
android:background="#ff0000"
三、取色工具
顏色都是用RGB值定義的,而我們一般是無法直觀的知道自己需要顏色的值,需要借用取色工具直接從圖片或者其他地方獲取顏色的RGB值。
①、ColorPix(for Win)
簡單的取色調色工具,可以從屏幕取色,非常小而精簡。
點擊下載ColorPix
②、Picpick(for Win)
功能更加強大的工具:PicPick。
PicPick具備了截取全屏、活動窗口、指定區域、固定區域、手繪區域功能,支持滾動截屏,屏幕取色,支持雙顯示器,具備白板、屏幕標尺、直角座標或極座標顯示與測量,具備強大的圖像編輯和標注功能。
點擊下載PicPick
四、顏色混合模式(Alpha通道相關)
通過前面介紹我們知道顏色一般都是四個通道(ARGB)的,其中(RGB)控制的是顏色,而A(Alpha)控制的是透明度。
因為我們的顯示屏是沒法透明的,因此最終顯示在屏幕上的顏色里可以認為沒有Alpha通道。Alpha通道主要在兩個圖像混合的時候生效。
默認情況下,當一個顏色繪制到Canvas上時的混合模式是這樣計算的:
(RGB通道) 最終顏色 = 繪制的顏色 + (1 - 繪制顏色的透明度) × Canvas上的原有顏色
*** 注意: ***
1.這里我們一般把每個通道的取值從0(ox00)到255(0xff)映射到0到1的浮點數表示。
2.這里等式右邊的“繪制的顏色”、“Canvas上的原有顏色” 都是經過預乘了自己的Alpha通道的值。如繪制顏色:0x88ffffff,那么參與運算時的每個顏色通道的值不是1.0,而是(1.0 * 0.5333 = 0.5333)。 (其中0.5333 = 0x88/0xff)
使用這種方式的混合,就會造成后繪制的內容以半透明的方式疊在上面的視覺效果。
其實還可以有不同的混合模式供我們選擇,用Paint.setXfermode,指定不同的PorterDuff.Mode。
下表是各個PorterDuff模式的混合計算公式:(D指原本在Canvas上的內容dst,S指繪制輸入的內容src,a指alpha通道,c指RGB各個通道)
用示例圖來查看使用不同模式時的混合效果如下(src表示輸入的圖,dst表示原Canvas上的內容):