Android UI效果之繪圖篇（二）
一、Canvas
Canvas中的方法很多，這里我們只挑常用的進行講解說明
Canvas可以繪制的對象有：
- 弧線(arcs) canvas.
- 填充顏色(argb和color)
- Bitmap
- 圓(circle和oval)
- 點(point)
- 線(line)
- 矩形(Rect)
- 圖片(Picture)
- 圓角矩形 (RoundRect)
- 文本(text)
- 頂點(Vertices)
- 路徑(path)
繪制弧形
/** * 繪制弧形 * @param oval 繪制區(qū)域 * @param startAngle 開始繪制的角度 * @param sweepAngle 結束繪制的角度 * @param useCenter 是否使用中心 * @param paint 畫筆 */ public void drawArc(RectF oval, float startAngle, float sweepAngle,boolean useCenter, Paint paint)
其中前三個參數(shù)都比較好理解，關鍵是第三個參數(shù)useCenter，看張圖你就明白了
可以發(fā)現(xiàn)當useCenter=true時，弧形的區(qū)域是開始角度的點和結束角度的點和中心點連接起來的區(qū)域；而useCenter=false時，弧形區(qū)域是開始角度的點和結束角度的點直接連接起來的區(qū)域。
繪制路徑
mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(3); Path path = new Path(); path.moveTo(5, 10); path.lineTo(120, 30); path.lineTo(44, 66); path.lineTo(77, 231); canvas.drawPath(path, mPaint);
繪制路徑比較簡單，依次添加相應的坐標點即可，注意設置畫筆的抗鋸齒和Style即可。
- 繪制文字路徑
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(3);
Path path = new Path();
path.moveTo(50, 50);
path.lineTo(200, 250);
path.lineTo(300, 450);
path.lineTo(300, 650);
mPaint.setTextSize(46);
canvas.drawTextOnPath("Hi_xiaoyu_bolg_in_android", path, 0, 0, mPaint);
這個和繪制路徑一樣，注意設置大小，畫筆粗細即可。
/**
* 畫圓
* @param cx 圓心X坐標
* @param cy 圓心Y坐標
* @param radius 圓的半徑
* @param paint
*/
public void drawCircle(float cx, float cy, float radius, Paint paint) {
}
// 畫圓
canvas.drawCircle(50, 50, 50, mPaint);
RectF r = new RectF(150, 0, 270, 110);
// 畫矩形
canvas.drawRect(r, mPaint);
RectF oval = new RectF(0, 120, 50, 270);
// 畫橢圓
canvas.drawOval(oval, mPaint);
RectF rect = new RectF(100, 120, 170, 200);
// 畫圓角矩形
canvas.drawRoundRect(rect, 30, 20, mPaint);
// 畫線
canvas.drawLine(200, 120, 300, 300, mPaint);
其他的drawXxx方法這里就不再贅述，大家可以一一去嘗試。
這里再來看下canvas中幾個比較重要的方法：
canvas.save(); canvas.restore(); canvas.translate(dx, dy); canvas.rotate(degrees); canvas.saveLayer(bounds, paint, saveFlags);
save()：把當前的繪制的圖像保存起來，讓后續(xù)的操作相當于是在一個新的圖層上的操作。
restore()：將sava()之前的圖層和save之后的圖層進行合并操作
translate()：畫布平移
rotate()：畫布旋轉
大家可能會有疑問，既然我們可以利用坐標系來定位畫布中的所有坐標點，為什么還要畫布平移和畫布旋轉的api呢？現(xiàn)在假設有這樣一個需求，需要繪制一個儀表盤，而繪制儀表盤的刻度我們可以利用三角函數(shù)sin cos 來計算出相應的偏移角度，當然這對于數(shù)學學霸來說很easy，一般人而言就需要把三角函數(shù)的公式翻個遍了，所以谷歌工程師，為我們實現(xiàn)平移和旋轉的api，遇到類似于儀表盤的效果是，只需要旋轉當前畫布就能實現(xiàn)相應的效果，為我們節(jié)省了計算量和工作量。
paint.setColor(0xff00ccff);
paint.setAntiAlias(true);
paint.setStyle(Style.STROKE);
canvas.translate(canvas.getWidth() / 2, 200); // 將位置移動畫紙的坐標點,不用每次都從坐標原點計算
canvas.drawCircle(0, 0, 100, paint);
Paint tmpPaint = new Paint(paint);
tmpPaint.setStrokeWidth(1);
float y = 100;
int count = 60; // 總刻度數(shù)
for (int i = 0; i < count; i++) {
if (i % 5 == 0) {
canvas.drawLine(0f, y, 0, y + 12f, paint);
canvas.drawText(String.valueOf(i / 5 + 1), -4f, y + 25f,
tmpPaint);
} else {
canvas.drawLine(0f, y, 0f, y + 5f, tmpPaint);
}
canvas.rotate(360 / count, 0f, 0f); // 旋轉畫紙
}
// 繪制指針
paint.setStrokeWidth(2);
canvas.drawLine(0, 10, 0, -65, paint);
paint.setStrokeWidth(4);
canvas.drawLine(0, 10, 20, -35, paint);
以上就是Android開發(fā)中的UI效果設計模塊的第二部分內容，之后還會繼續(xù)更新，希望對大家的學習有所幫助。
相關文章
Android okhttputils現(xiàn)在進度顯示實例代碼
本文通過實例代碼給大家詳細介紹了Android okhttputils現(xiàn)在進度顯示，代碼簡答易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2016-12-12
這篇文章主要介紹了Cocos2d-x入門教程,包括詳細的實例、講解以及實現(xiàn)過程,需要的朋友可以參考下2014-04-04
Android實現(xiàn)Android?APP自動更新功能
在移動應用的全生命周期中,版本迭代和用戶更新體驗至關重要,傳統(tǒng)的做法是依賴?Google?Play?商店強制推送更新,但在某些場景下,我們需要更即時地控制更新流程,所以本文給大家介紹了Android實現(xiàn)Android?APP自動更新功能,需要的朋友可以參考下2025-04-04
這篇文章主要為大家詳細介紹了android實現(xiàn)簡單計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
Android用戶輸入自動提示控件AutoCompleteTextView使用方法
這篇文章主要為大家詳細介紹了Android用戶輸入自動提示控件AutoCompleteTextView的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
android基于SwipeRefreshLayout實現(xiàn)類QQ的側滑刪除
本篇文章主要介紹了android基于SwipeRefreshLayout實現(xiàn)類QQ的側滑刪除，非常具有實用價值，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了flutter 路由跳轉的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
android?scrollview頂部漸漸消失實現(xiàn)實例詳解
這篇文章主要為大家介紹了android?scrollview頂部漸漸消失實現(xiàn)實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
Android自定義recyclerView實現(xiàn)時光軸效果
這篇文章主要介紹了Android自定義recyclerView實現(xiàn)時光軸效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
Android判斷設備網絡連接狀態(tài)及判斷連接方式的方法
這篇文章主要介紹了Android判斷設備網絡連接狀態(tài)及判斷連接方式的方法,涉及Android針對網絡連接的相關判定技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10