平面繪圖與動畫.

Presentation on theme: "平面繪圖與動畫."— Presentation transcript:

1 平面繪圖與動畫

2 一、Canvas繪圖 要在Android行動裝置繪製平面圖形，所使用的工具主要來自「android.graphics.*」套件。
Canvas：Canvas其實就是應用程式執行時顯示的畫面，有點類似一般繪圖用的畫布，是繪圖發生的地點。 Paint：是繪圖的執行工具，它能控制使用的顏色、透明度、畫刷大小、圖形填滿模式與樣式等；如果用以繪製文字，透過Paint類別也能設定文字的字型、字體與大小等。 Bitmap：實際畫出來的圖形，其實就是所繪出圖形像素的集合體。

3 繪製的基本形狀：組成繪製內容的基本圖素，如點、線段、矩形、橢圓形等。
繪圖主要是在View類別的「onDraw(Canvas)」方法內完成，因此要在Canvas上繪圖，應該先建立一個繼承自View的子類別，然後在此類別中的onDraw(Canvas)方法內完成繪圖。

4 二、基本形狀繪製 常用的繪製方法說明如下：
劃點：在指定位置劃點。劃一個點使用「drawPoint(float x, float y, Paint paint)」方法；劃多個點則使用「drawPoints(float[] float, int offset, int count, Paint paint)」方法。 畫一條線段：使用的方法為「drawLine(float startX, float startY, float stopX, float stopY, Paint paint)」。 畫多條線段：使用的方法為「drawLines(float[] pts, int offset, int count, Paint paint)」。

5 劃弧：使用的方法為「drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)」。
劃圓：使用的方法為「drawCircle(float cx, float cy, float radius, Paint paint)」。 劃橢圓：使用的方法為「drawOval(RectF oval, Paint paint)」。 劃矩形：使用的方法為「drawRect(float left, float top, float right, float bottom, Paint paint)」。 劃圓角矩形：使用的方法為「drawRoundRect(RectF rect, float rx, float ry, Paint paint)」

6 CanvasDraw Test範例 在Canvas上繪製一些不同顏色的幾何圖形。
在專案中增加一個View的延伸類別，命名為「DrawImage.java」。 在這自建類別中用Paint陣列設定了6組畫刷，分別用以繪製6種幾何圖形。 範例詳細內容請參考原書。

7 三、路徑與繪製文字 路徑是一條曲線，封閉或開放都可以，Canvas類別以drawPath(Path path, Paint paint)方法繪製路徑。 path：路徑的軌跡；對開放路徑是由不同線段組成，對封閉路徑則可以是一個形狀(如圓、矩形等)。 Paint：繪圖時使用的畫刷。 畫刷也提供「setPathEffect(PathEffect effect)」方法，可用以設定路徑的特殊效果，設定內容如下： CornerPathEffect：設定線段與線段之間的連接角為指定半徑的圓角，建構函式定義為CornerPathEffect (float radius)。

8 Canvas對文字提供3組方法，說明如下：
DashPathEffect：設定構成路徑的線段是以破折號構成。 PathDashPathEffect：類似DashPathEffect，但破折號是以指定形狀建立。 ComposePathEffect：作用是先應用內部的效果(參數2)，再用外部效果(參數1) 。 null：不設定任何特效。 Canvas對文字提供3組方法，說明如下： drawText()：從指定位置劃出文字，執行此方法需提供要劃的文字、開始劃的位置以及畫刷等參數。

9 rawTextOnPath()：沿指定的路徑劃出文字內容，執行此方法需提供要劃的文字、依循的路徑、指定從距離路徑起點水平位置開始劃、設定文字與路徑的垂直偏移量以及畫刷等參數，也可以指定只劃文字的部份內容。 drawPosText()：這方法是以指定文字內容每一個字(中文字或英文字母)的位置，將文字顯示在Canvas上，執行時需要提供要劃的文字、含每個字(或英文字母)座標的陣列以及畫刷等參數，也可以指定只劃文字的部份內容。

10 DrawText Test範例 在Canvas上劃出4 組文字，第1組只設定文字大小與顏色；第2組除了文字大小與顏色外，還設定了文字傾斜效果；第3組使用第1組的畫刷，但設定文字沿指定路徑描繪；第4組也是使用第1組的畫刷，但指定了文字描繪時每一個字的座標位置。 範例詳細內容請參考原書。

11 四、點陣圖繪製 Canvas也能將現成的點陣圖影像檔繪到視圖中。
要繪製現成的點陣圖影像檔，最簡單的方法就是透過「Drawable」類別取得影像檔資源，然後用此類別的「draw()」方法將點陣圖劃在Canvas上。 在繪製之前，必須呼叫「setBound(Rect)」方法，以一個矩形區域告訴Drawable物件要繪製的位置與大小。

12 另一種作法是透過「Bitmap」與「BitmapFactory」類別，這種作法是先用「InputStream」物件取得要繪製點陣圖的資源，然後借助BitmapFactory類別的「decodeStream()」方法將存有點陣圖資源的輸入串流解碼為Bitmap物件，最後再用Canvas的「drawBitmap()」方法繪出點陣圖。 DrawBitmap Test範例 同時使用Drawable與Bitmap在Canvas上繪出g6.jpg與g5.jpg影像檔。 此檔案已事先存至專案「/res/drawable-xhdpi/」目錄。 範例詳細內容請參考原書。

13 五、2D影像處理 2D影像處理是指對Canvas上繪製的幾何圖形、文字或點陣圖(以下均稱為影像)，變更它的性質(如透明度)、增加色彩渲染效果、或是改變它的幾何關係。 改變影像透明度 影像透明度可以透過畫刷的「setAlpha(int)」方法完成，設定的值從0(完全透明)到255(完全不透明) 。

14 為影像增加渲染效果 渲染主要是讓原影像和另一個圖樣(可以是顏色或其他影像)融合而產生的特殊效果。 Android提供的渲染方式有以下幾種：
BitmapShader：用點陣圖作為渲染的圖樣。 public BitmapShader(Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY) LinearGradient：渲染圖樣是沿一條指定線(以線2端的座標指定)變化的色彩 public LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile)

15 RadialGradient：渲染圖樣是以指定中心為起點，輻射向外變化的顏色梯度
public RadialGradient(float x, float y, float radius, int[] colors, float[] positions, Shader.TileMode tile) SweepGradient：渲染圖樣是以指定中心產生的掃描顏色梯度 public SweepGradient(float cx, float cy, int[] colors, float[] positions) ComposeShader：從指定的2個渲染器建立組合渲染器 public ComposeShader(Shader shaderA, Shader shaderB, Xfermode mode) 或 public ComposeShader (Shader shaderA, Shader shaderB, PorterDuff.Mode mode)

16 使用Matrix改變影像幾何關係 Android SDK提供Matrix類別，可以對影像進行變換處理，變換包括有：旋轉、縮放、傾斜、平移等，只要透過Matrix實體類別的方法設定想要的變換，再將此Matrix實體類別用Canvas的「setMatrix (Matrix matrix)」方法設定給自己，就能完成指定的變換。 旋轉(Rotate)：「public void setRotate(float degrees)」或「public void setRotate(float degrees, float px, float py)」。 縮放(Scale)：「public void setScale(float sx, float sy)」或「public void setScale(float sx, float sy, float px, float py)」，以(px, py)為縮放中心，X軸縮放率sx，Y軸縮放率sy。

17 傾斜(Skew)：「public void setSkew(float kx, float ky)」或「public void setSkew(float kx, float ky, float px, float py)」，以(px, py)為傾斜中心，X軸傾斜率kx，Y軸傾斜率ky。 平移(Translate)：「public void setTranslate(float dx, float dy)」，X軸移動距離dx，Y軸移動距離dy。

18 六、平面動畫 一般有3種建立平面動畫的方式：
影格動畫(Frame animation)：這是傳統動畫產生的方式，藉由播放一系列影像及利用視覺暫留現象，使靜態影像產生動的感覺。 補間動畫(Tween animation)：利用提供動畫目標開始及結束的屬性值與動畫時間，讓系統自行產生中間的過程，動畫的設定可以透過動畫XML定義檔設定，或是直接用程式控制。 動態繪圖：這方式是利用持續更新Canvas上繪出的圖形(幾何圖形、文字或點陣圖)，達到動畫效果。

19 影格動畫 影格動畫可以透過「AnimationDrawable」類別實現，一般設定步驟如下：
將要用以產生動畫的影像檔加入專案「/res/drawable-xhdpi/」目錄。 設定活動佈局。 動畫使用的影像清單可以透過XML定義檔設定，此檔以<animation-list>標籤為清單設定開始位置，清單的每一個影像在<item> 內用「android:drawable」指定使用的影像檔，並用「android:duration」指定此張影像出現的時間長度。

20 在活動類別中建立AnimationDrawable與Resources物件，讓AnimationDrawable物件參考到動畫使用的影像清單XML定義檔，並將此AnimationDrawable物件設定給顯示媒介ImageView元件。 範例FrameAnimationXML Test 範例詳細內容請參考原書。 對於影格動畫，也可以不建立動畫影像清單定義檔，而直接用AnimationDrawable物件的「addFrame()」方法，將動畫影像一張張加入，這時候Resources物件getDrawable()方法的對象不再是動畫影像清單定義檔，而是各別的影像檔。

21 補間動畫 補間動畫依據要動態變化的屬性，各有對應的Animation物件，以程式設定的方式步驟如下：
設定活動佈局。 在活動程式碼實體化要動態變化屬性的動畫類別。 範例TweenAnimation Test詳細內容請參考原書。 補間動畫與影格動畫最大差別為，補間動畫變動的是顯示元件的屬性，而影格動畫是影像本身內容改變。

22 動態繪圖 動態繪圖產生的動畫其實就是不斷重新改變劃在Canvas上的圖形。繪圖是透過自建View子類別的onDraw(Canvas)方法將影像劃在Canvas上。 呼叫onDraw方法需要傳送Canvas物件給它，而Canvas物件是由系統親自管理，所以onDraw方法是由系統呼叫。 在自建的View子類別內要執行onDraw方法，只能透過「invalidate()」方法向系統提出執行onDraw方法的請求。

23 CanvasAnimation Test範例
範例詳細內容請參考原書。

24 七、手繪應用程式 HandDraw Test範例 目的是讓使用者用手在觸控螢幕上繪圖。
繪圖部份可以透過繪製路徑的方法(drawPath(Path path, Paint paint))完成，但路徑的座標就必須借重「ＭotionEvent」類別。 當觸控螢幕發生觸控相關事件，系統會傳送ＭotionEvent物件給被觸視圖的「onTouchEvent(MotionEvent event)」方法。這個方法利用ＭotionEvent物件的「getAction()」方法，可以知道發生的是什麼樣的觸控事件(壓下、拖曳或放開)，用「getX()」與「getY()」方法則可以取得事件發生的位置。 範例詳細內容請參考原書。