十平面绘图与动画课件

平面繪圖與動畫平面繪圖與動畫一、Canvas繪圖要在Android行動裝置繪製平面圖形，所使用的工具主要來自「android.graphics.*」套件。要使用Canvas繪圖你將需以下的物件：Canvas：Canvas其實就是應用程式執行時顯示的畫面，有點類似一般繪圖用的畫布，是繪圖發生的地點。Paint：是繪圖的執行工具，它能控制使用的顏色、透明度、畫刷大小、圖形填滿模式與樣式等；如果用以繪製文字，透過Paint類別也能設定文字的字型、字體與大小等。Bitmap：實際畫出來的圖形，其實就是所繪出圖形像素的集合體。一、Canvas繪圖要在Android行動裝置繪製平面圖形，繪製的基本形狀：組成繪製內容的基本圖素，如點、線段、矩形、橢圓形等。繪圖主要是在View類別的「onDraw(Canvas)」方法內完成，因此要在Canvas上繪圖，應該先建立一個繼承自View的子類別，然後在此類別中的onDraw(Canvas)方法內完成繪圖。繪製的基本形狀：組成繪製內容的基本圖素，如點、線段、矩形、橢二、基本形狀繪製常用的繪製方法說明如下：劃點：在指定位置劃點。劃一個點使用「drawPoint(floatx,floaty,Paintpaint)」方法；劃多個點則使用「drawPoints(float[]float,intoffset,intcount,Paintpaint)」方法。畫一條線段：使用的方法為「drawLine(floatstartX,floatstartY,floatstopX,floatstopY,Paintpaint)」。畫多條線段：使用的方法為「drawLines(float[]pts,intoffset,intcount,Paintpaint)」。二、基本形狀繪製常用的繪製方法說明如下：劃弧：使用的方法為「drawArc(RectFoval,floatstartAngle,floatsweepAngle,booleanuseCenter,Paintpaint)」。劃圓：使用的方法為「drawCircle(floatcx,floatcy,floatradius,Paintpaint)」。劃橢圓：使用的方法為「drawOval(RectFoval,Paintpaint)」。劃矩形：使用的方法為「drawRect(floatleft,floattop,floatright,floatbottom,Paintpaint)」。劃圓角矩形：使用的方法為「drawRoundRect(RectFrect,floatrx,floatry,Paintpaint)」劃弧：使用的方法為「drawArc(RectFoval,CanvasDrawTest範例在Canvas上繪製一些不同顏色的幾何圖形。在專案中增加一個View的延伸類別，命名為「DrawImage.java」。在這自建類別中用Paint陣列設定了6組畫刷，分別用以繪製6種幾何圖形。範例詳細內容請參考原書。CanvasDrawTest範例三、路徑與繪製文字路徑是一條曲線，封閉或開放都可以，Canvas類別以drawPath(Pathpath,Paintpaint)方法繪製路徑。path：路徑的軌跡；對開放路徑是由不同線段組成，對封閉路徑則可以是一個形狀(如圓、矩形等)。Paint：繪圖時使用的畫刷。畫刷也提供「setPathEffect(PathEffecteffect)」方法，可用以設定路徑的特殊效果，設定內容如下：CornerPathEffect：設定線段與線段之間的連接角為指定半徑的圓角，建構函式定義為CornerPathEffect(floatradius)。三、路徑與繪製文字路徑是一條曲線，封閉或開放都可以，CanvDashPathEffect：設定構成路徑的線段是以破折號構成。PathDashPathEffect：類似DashPathEffect，但破折號是以指定形狀建立。ComposePathEffect：作用是先應用內部的效果(參數2)，再用外部效果(參數1)。null：不設定任何特效。Canvas對文字提供3組方法，說明如下：drawText()：從指定位置劃出文字，執行此方法需提供要劃的文字、開始劃的位置以及畫刷等參數。DashPathEffect：設定構成路徑的線段是以破折號構rawTextOnPath()：沿指定的路徑劃出文字內容，執行此方法需提供要劃的文字、依循的路徑、指定從距離路徑起點水平位置開始劃、設定文字與路徑的垂直偏移量以及畫刷等參數，也可以指定只劃文字的部份內容。drawPosText()：這方法是以指定文字內容每一個字(中文字或英文字母)的位置，將文字顯示在Canvas上，執行時需要提供要劃的文字、含每個字(或英文字母)座標的陣列以及畫刷等參數，也可以指定只劃文字的部份內容。rawTextOnPath()：沿指定的路徑劃出文字內容，執DrawTextTest範例在Canvas上劃出4組文字，第1組只設定文字大小與顏色；第2組除了文字大小與顏色外，還設定了文字傾斜效果；第3組使用第1組的畫刷，但設定文字沿指定路徑描繪；第4組也是使用第1組的畫刷，但指定了文字描繪時每一個字的座標位置。範例詳細內容請參考原書。DrawTextTest範例四、點陣圖繪製Canvas也能將現成的點陣圖影像檔繪到視圖中。要繪製現成的點陣圖影像檔，最簡單的方法就是透過「Drawable」類別取得影像檔資源，然後用此類別的「draw()」方法將點陣圖劃在Canvas上。在繪製之前，必須呼叫「setBound(Rect)」方法，以一個矩形區域告訴Drawable物件要繪製的位置與大小。四、點陣圖繪製Canvas也能將現成的點陣圖影像檔繪到視圖中另一種作法是透過「Bitmap」與「BitmapFactory」類別，這種作法是先用「InputStream」物件取得要繪製點陣圖的資源，然後借助BitmapFactory類別的「decodeStream()」方法將存有點陣圖資源的輸入串流解碼為Bitmap物件，最後再用Canvas的「drawBitmap()」方法繪出點陣圖。DrawBitmapTest範例同時使用Drawable與Bitmap在Canvas上繪出g6.jpg與g5.jpg影像檔。此檔案已事先存至專案「/res/drawable-xhdpi/」目錄。範例詳細內容請參考原書。另一種作法是透過「Bitmap」與「BitmapFactor五、2D影像處理2D影像處理是指對Canvas上繪製的幾何圖形、文字或點陣圖(以下均稱為影像)，變更它的性質(如透明度)、增加色彩渲染效果、或是改變它的幾何關係。改變影像透明度影像透明度可以透過畫刷的「setAlpha(int)」方法完成，設定的值從0(完全透明)到255(完全不透明)。五、2D影像處理2D影像處理是指對Canvas上繪製的幾何圖為影像增加渲染效果渲染主要是讓原影像和另一個圖樣(可以是顏色或其他影像)融合而產生的特殊效果。Android提供的渲染方式有以下幾種：BitmapShader：用點陣圖作為渲染的圖樣。publicBitmapShader(Bitmapbitmap,

Shader.TileModetileX,Shader.TileModetileY)LinearGradient：渲染圖樣是沿一條指定線(以線2端的座標指定)變化的色彩publicLinearGradient(floatx0,floaty0,floatx1,floaty1,int[]colors,float[]positions,Shader.TileModetile)為影像增加渲染效果RadialGradient：渲染圖樣是以指定中心為起點，輻射向外變化的顏色梯度publicRadialGradient(floatx,floaty,floatradius,int[]colors,float[]positions,Shader.TileModetile)SweepGradient：渲染圖樣是以指定中心產生的掃描顏色梯度publicSweepGradient(floatcx,floatcy,int[]colors,float[]positions)ComposeShader：從指定的2個渲染器建立組合渲染器publicComposeShader(ShadershaderA,

ShadershaderB,Xfermodemode)或publicComposeShader(ShadershaderA,

ShadershaderB,PorterDuff.Modemode)RadialGradient：渲染圖樣是以指定中心為起點，輻使用Matrix改變影像幾何關係AndroidSDK提供Matrix類別，可以對影像進行變換處理，變換包括有：旋轉、縮放、傾斜、平移等，只要透過Matrix實體類別的方法設定想要的變換，再將此Matrix實體類別用Canvas的「setMatrix(Matrixmatrix)」方法設定給自己，就能完成指定的變換。旋轉(Rotate)：「publicvoidsetRotate(floatdegrees)」或「publicvoidsetRotate(floatdegrees,floatpx,floatpy)」。縮放(Scale)：「publicvoidsetScale(floatsx,floatsy)」或「publicvoidsetScale(floatsx,floatsy,floatpx,floatpy)」，以(px,py)為縮放中心，X軸縮放率sx，Y軸縮放率sy。使用Matrix改變影像幾何關係傾斜(Skew)：「publicvoidsetSkew(floatkx,floatky)」或「publicvoidsetSkew(floatkx,floatky,floatpx,floatpy)」，以(px,py)為傾斜中心，X軸傾斜率kx，Y軸傾斜率ky。平移(Translate)：「publicvoidsetTranslate(floatdx,floatdy)」，X軸移動距離dx，Y軸移動距離dy。傾斜(Skew)：「publicvoidsetSkew(六、平面動畫一般有3種建立平面動畫的方式：影格動畫(Frameanimation)：這是傳統動畫產生的方式，藉由播放一系列影像及利用視覺暫留現象，使靜態影像產生動的感覺。補間動畫(Tweenanimation)：利用提供動畫目標開始及結束的屬性值與動畫時間，讓系統自行產生中間的過程，動畫的設定可以透過動畫XML定義檔設定，或是直接用程式控制。動態繪圖：這方式是利用持續更新Canvas上繪出的圖形(幾何圖形、文字或點陣圖)，達到動畫效果。六、平面動畫一般有3種建立平面動畫的方式：影格動畫影格動畫可以透過「AnimationDrawable」類別實現，一般設定步驟如下：將要用以產生動畫的影像檔加入專案「/res/drawable-xhdpi/」目錄。設定活動佈局。動畫使用的影像清單可以透過XML定義檔設定，此檔以<animation-list>標籤為清單設定開始位置，清單的每一個影像在<item>內用「android:drawable」指定使用的影像檔，並用「android:duration」指定此張影像出現的時間長度。影格動畫在活動類別中建立AnimationDrawable與Resources物件，讓AnimationDrawable物件參考到動畫使用的影像清單XML定義檔，並將此AnimationDrawable物件設定給顯示媒介ImageView元件。範例FrameAnimationXMLTest範例詳細內容請參考原書。對於影格動畫，也可以不建立動畫影像清單定義檔，而直接用AnimationDrawable物件的「addFrame()」方法，將動畫影像一張張加入，這時候Resources物件getDrawable()方法的對象不再是動畫影像清單定義檔，而是各別的影像檔。在活動類別中建立AnimationDrawable與Reso補間動畫補間動畫依據要動態變化的屬性，各有對應的Animation物件，以程式設定的方式步驟如下：設定活動佈局。在活動程式碼實體化要動態變化屬性的動畫類別。範例TweenAnimationTest詳細內容請參考原書。補間動畫與影格動畫最大差別為，補間動畫變動的是顯示元件的屬性，而影格動畫是影像本身內容改變。補間動畫動態繪圖動態繪圖產生的動畫其實就是不斷重新改變劃在Canvas上的圖形。繪圖是透過自建View子類別的onDraw(Canvas)方法將影像劃在Canvas上。呼叫onDraw方法需要傳送Canvas物件給它，而Canvas物件是由系統親自管理，所以onDraw方法是由系統呼叫。在自建的View子類別內要執行onDraw方法，只能透過「invalidate()」方法向系統提出執行onDraw方法的請求。動態繪圖CanvasAnimationTest範例以動態繪圖方式，在Canvas上劃出一條從左上角(10,10)逐漸向右下角延伸的直線。範例詳細內容請參考原書。CanvasAnimationTest範例七、手繪應用程式HandDrawTest範例目的是讓使用者用手在觸控螢幕上繪圖。繪圖部份可以透過繪製路徑的方法(drawPath(Pathpath,Paintpaint))完成，但路徑的座標就必須借重「ＭotionEvent」類別。當觸控螢幕發生觸控相關事件，系統會傳送ＭotionEvent物件給被觸視圖的「onTouchEvent(MotionEventevent)」方法。這個方法利用ＭotionEvent物件的「getAction()」方法，可以知道發生的是什麼樣的觸控事件(壓下、拖曳或放開)，用「getX()」與「getY()」方法則可以取得事件發生的位置。範例詳細內容請參考原書。七、手繪應用程式HandDrawTest範例平面繪圖與動畫平面繪圖與動畫一、Canvas繪圖要在Android行動裝置繪製平面圖形，所使用的工具主要來自「android.graphics.*」套件。要使用Canvas繪圖你將需以下的物件：Canvas：Canvas其實就是應用程式執行時顯示的畫面，有點類似一般繪圖用的畫布，是繪圖發生的地點。Paint：是繪圖的執行工具，它能控制使用的顏色、透明度、畫刷大小、圖形填滿模式與樣式等；如果用以繪製文字，透過Paint類別也能設定文字的字型、字體與大小等。Bitmap：實際畫出來的圖形，其實就是所繪出圖形像素的集合體。一、Canvas繪圖要在Android行動裝置繪製平面圖形，繪製的基本形狀：組成繪製內容的基本圖素，如點、線段、矩形、橢圓形等。繪圖主要是在View類別的「onDraw(Canvas)」方法內完成，因此要在Canvas上繪圖，應該先建立一個繼承自View的子類別，然後在此類別中的onDraw(Canvas)方法內完成繪圖。繪製的基本形狀：組成繪製內容的基本圖素，如點、線段、矩形、橢二、基本形狀繪製常用的繪製方法說明如下：劃點：在指定位置劃點。劃一個點使用「drawPoint(floatx,floaty,Paintpaint)」方法；劃多個點則使用「drawPoints(float[]float,intoffset,intcount,Paintpaint)」方法。畫一條線段：使用的方法為「drawLine(floatstartX,floatstartY,floatstopX,floatstopY,Paintpaint)」。畫多條線段：使用的方法為「drawLines(float[]pts,intoffset,intcount,Paintpaint)」。二、基本形狀繪製常用的繪製方法說明如下：劃弧：使用的方法為「drawArc(RectFoval,floatstartAngle,floatsweepAngle,booleanuseCenter,Paintpaint)」。劃圓：使用的方法為「drawCircle(floatcx,floatcy,floatradius,Paintpaint)」。劃橢圓：使用的方法為「drawOval(RectFoval,Paintpaint)」。劃矩形：使用的方法為「drawRect(floatleft,floattop,floatright,floatbottom,Paintpaint)」。劃圓角矩形：使用的方法為「drawRoundRect(RectFrect,floatrx,floatry,Paintpaint)」劃弧：使用的方法為「drawArc(RectFoval,CanvasDrawTest範例在Canvas上繪製一些不同顏色的幾何圖形。在專案中增加一個View的延伸類別，命名為「DrawImage.java」。在這自建類別中用Paint陣列設定了6組畫刷，分別用以繪製6種幾何圖形。範例詳細內容請參考原書。CanvasDrawTest範例三、路徑與繪製文字路徑是一條曲線，封閉或開放都可以，Canvas類別以drawPath(Pathpath,Paintpaint)方法繪製路徑。path：路徑的軌跡；對開放路徑是由不同線段組成，對封閉路徑則可以是一個形狀(如圓、矩形等)。Paint：繪圖時使用的畫刷。畫刷也提供「setPathEffect(PathEffecteffect)」方法，可用以設定路徑的特殊效果，設定內容如下：CornerPathEffect：設定線段與線段之間的連接角為指定半徑的圓角，建構函式定義為CornerPathEffect(floatradius)。三、路徑與繪製文字路徑是一條曲線，封閉或開放都可以，CanvDashPathEffect：設定構成路徑的線段是以破折號構成。PathDashPathEffect：類似DashPathEffect，但破折號是以指定形狀建立。ComposePathEffect：作用是先應用內部的效果(參數2)，再用外部效果(參數1)。null：不設定任何特效。Canvas對文字提供3組方法，說明如下：drawText()：從指定位置劃出文字，執行此方法需提供要劃的文字、開始劃的位置以及畫刷等參數。DashPathEffect：設定構成路徑的線段是以破折號構rawTextOnPath()：沿指定的路徑劃出文字內容，執行此方法需提供要劃的文字、依循的路徑、指定從距離路徑起點水平位置開始劃、設定文字與路徑的垂直偏移量以及畫刷等參數，也可以指定只劃文字的部份內容。drawPosText()：這方法是以指定文字內容每一個字(中文字或英文字母)的位置，將文字顯示在Canvas上，執行時需要提供要劃的文字、含每個字(或英文字母)座標的陣列以及畫刷等參數，也可以指定只劃文字的部份內容。rawTextOnPath()：沿指定的路徑劃出文字內容，執DrawTextTest範例在Canvas上劃出4組文字，第1組只設定文字大小與顏色；第2組除了文字大小與顏色外，還設定了文字傾斜效果；第3組使用第1組的畫刷，但設定文字沿指定路徑描繪；第4組也是使用第1組的畫刷，但指定了文字描繪時每一個字的座標位置。範例詳細內容請參考原書。DrawTextTest範例四、點陣圖繪製Canvas也能將現成的點陣圖影像檔繪到視圖中。要繪製現成的點陣圖影像檔，最簡單的方法就是透過「Drawable」類別取得影像檔資源，然後用此類別的「draw()」方法將點陣圖劃在Canvas上。在繪製之前，必須呼叫「setBound(Rect)」方法，以一個矩形區域告訴Drawable物件要繪製的位置與大小。四、點陣圖繪製Canvas也能將現成的點陣圖影像檔繪到視圖中另一種作法是透過「Bitmap」與「BitmapFactory」類別，這種作法是先用「InputStream」物件取得要繪製點陣圖的資源，然後借助BitmapFactory類別的「decodeStream()」方法將存有點陣圖資源的輸入串流解碼為Bitmap物件，最後再用Canvas的「drawBitmap()」方法繪出點陣圖。DrawBitmapTest範例同時使用Drawable與Bitmap在Canvas上繪出g6.jpg與g5.jpg影像檔。此檔案已事先存至專案「/res/drawable-xhdpi/」目錄。範例詳細內容請參考原書。另一種作法是透過「Bitmap」與「BitmapFactor五、2D影像處理2D影像處理是指對Canvas上繪製的幾何圖形、文字或點陣圖(以下均稱為影像)，變更它的性質(如透明度)、增加色彩渲染效果、或是改變它的幾何關係。改變影像透明度影像透明度可以透過畫刷的「setAlpha(int)」方法完成，設定的值從0(完全透明)到255(完全不透明)。五、2D影像處理2D影像處理是指對Canvas上繪製的幾何圖為影像增加渲染效果渲染主要是讓原影像和另一個圖樣(可以是顏色或其他影像)融合而產生的特殊效果。Android提供的渲染方式有以下幾種：BitmapShader：用點陣圖作為渲染的圖樣。publicBitmapShader(Bitmapbitmap,

Shader.TileModetileX,Shader.TileModetileY)LinearGradient：渲染圖樣是沿一條指定線(以線2端的座標指定)變化的色彩publicLinearGradient(floatx0,floaty0,floatx1,floaty1,int[]colors,float[]positions,Shader.TileModetile)為影像增加渲染效果RadialGradient：渲染圖樣是以指定中心為起點，輻射向外變化的顏色梯度publicRadialGradient(floatx,floaty,floatradius,int[]colors,float[]positions,Shader.TileModetile)SweepGradient：渲染圖樣是以指定中心產生的掃描顏色梯度publicSweepGradient(floatcx,floatcy,int[]colors,float[]positions)ComposeShader：從指定的2個渲染器建立組合渲染器publicComposeShader(ShadershaderA,

ShadershaderB,Xfermodemode)或publicComposeShader(ShadershaderA,

ShadershaderB,PorterDuff.Modemode)RadialGradient：渲染圖樣是以指定中心為起點，輻使用Matrix改變影像幾何關係AndroidSDK提供Matrix類別，可以對影像進行變換處理，變換包括有：旋轉、縮放、傾斜、平移等，只要透過Matrix實體類別的方法設定想要的變換，再將此Matrix實體類別用Canvas的「setMatrix(Matrixmatrix)」方法設定給自己，就能完成指定的變換。旋轉(Rotate)：「publicvoidsetRotate(floatdegrees)」或「publicvoidsetRotate(floatdegrees,floatpx,floatpy)」。縮放(Scale)：「publicvoidsetScale(floatsx,floatsy)」或「publicvoidsetScale(floatsx,floatsy,floatpx,floatpy)」，以(px,py)為縮放中心，X軸縮放率sx，Y軸縮放率sy。使用Matrix改變影像幾何關係傾斜(Skew)：「publicvoidsetSkew(floatkx,floatky)」或「publicvoidsetSkew(floatkx,floatky,floatpx,floatpy)」，以(px,py)為傾斜中心，X軸傾斜率kx，Y軸傾斜率ky。平移(Translate)：「publicvoidsetTranslate(floatdx,floatdy)」，X軸移動距離dx，Y軸移動距離dy。傾斜(Skew)：「publicvoidsetSkew(六、平面動畫一般有3種建立平面動畫的方式：影格動畫(Frameanimation)：這是傳統動畫產生的方式，藉由播放一系列影像及利用視覺暫留現象，使靜態影像產生動的感覺。補間動畫(Tweenanimation)：利用提供動畫目標開始及結束的屬性值與動畫時間，讓系統自行產生中間的過程，動畫的設定可以透過動畫XML定義檔設定，或是直接用程式控制。動態繪圖：這方式是利用持續更新Canvas上繪出的圖形(幾何圖形、文字或點陣圖)，達到動畫效果。六、平面動畫一般有3種建立平面動畫的方式：影格動畫影格動畫可以透過「AnimationDrawable」類別實現，一般設定步驟如下：將要用以產生動畫的影像檔加入專案「/res/drawable-xhdpi/」目錄。設定活動佈局。動畫使用的影像清單可以透過XML定義檔設定，此檔以<animati