Android自定义控件前导基础知识学习(一)——Canvas
概述:
? ? 我們時常會遇到一些需要利用畫圖來實現的功能。例如一些常見的幾何圖形——點、直線、弧、圓、橢圓、文字、矩形、多邊形、曲線、圓角矩形,總不能遇到 一個幾何圖形就用圖片來代替吧。這樣我們的手機肯定會吃不消。就算我們現在能夠使用一些少量圖片能夠來解決當前的一些問題,可是對于那些“變化多端”的需求來說,這些手段根本不值一提。對此,我們可以利用Canvas畫圖技術來解決。下面就讓我們一起來解開Canvas的神秘面紗吧。
示例編程:
1.繪制圓形
首先看一下效果圖展示:
實現關鍵代碼:
private void drawCirle(Canvas canvas) {canvas.drawCircle(500, 500, 200, paint);}
2.繪制弧線區域
效果圖展示:
實現關鍵代碼:
private void drawCuttingCirle(Canvas canvas) {RectF rect = new RectF(0, 0, 400, 400);canvas.drawArc(rect, // 弧線所使用的矩形區域大小0, // 開始角度90, // 掃過的角度false, // 是否使用中心paint);}
3.繪制1/4圓
效果圖展示:
實現關鍵代碼:
private void drawQuarterCirle(Canvas canvas) {RectF rect = new RectF(0, 0, 300, 300);canvas.drawArc(rect, // 弧線所使用的矩形區域大小0, // 開始角度90, // 掃過的角度true, // 是否使用中心paint);}4.繪制直線
效果圖展示:
實現關鍵代碼:
private void drawLine(Canvas canvas) {canvas.drawLine(10, 10, 800, 1000, paint);}5.繪制橢圓
效果圖展示:
實現關鍵代碼:
private void drawOval(Canvas canvas) {// 定義一個矩形區域RectF oval = new RectF(10, 5, 600, 900);// 矩形區域內切橢圓canvas.drawOval(oval, paint);}
6.繪制矩形
效果圖展示:
實現關鍵代碼:
private void drawRect(Canvas canvas) {RectF rect = new RectF(50, 50, 200, 200);canvas.drawRect(rect, paint);}7.繪制圓角矩形
效果圖展示:
實現關鍵代碼:
private void drawSmoothRect(Canvas canvas) {RectF rect = new RectF(50, 50, 200, 200);canvas.drawRoundRect(rect, 30, // x軸的半徑30, // y軸的半徑paint);}8.繪制多邊形
效果圖展示:
實現關鍵代碼:
private void drawPolygon(Canvas canvas) {Path path = new Path(); // 定義一條路徑path.moveTo(10, 10); // 移動到 坐標10,10path.lineTo(150, 1360);path.lineTo(960, 720);path.lineTo(500, 180);path.lineTo(10, 10);canvas.drawPath(path, paint);}9.繪制羅盤
效果圖展示:
實現關鍵代碼:
private void drawCompass(Canvas canvas) {paint.setAntiAlias(true);paint.setStyle(Style.STROKE);canvas.translate(canvas.getWidth() / 2, 500); // 平移羅盤canvas.drawCircle(0, 0, 200, paint); // 畫圓圈// 使用path繪制路徑文字canvas.save();canvas.translate(-155, -155);Path path = new Path();path.addArc(new RectF(0, 0, 300, 300), -180, 180);Paint citePaint = new Paint(paint);citePaint.setTextSize(30);citePaint.setStrokeWidth(1);canvas.drawTextOnPath("http://blog.csdn.net/lemon_tree", path, 35, 0, citePaint);canvas.restore();Paint tmpPaint = new Paint(paint); // 小刻度畫筆對象tmpPaint.setStrokeWidth(2);tmpPaint.setTextSize(30);float y = 200;int count = 60; // 總刻度數for (int i = 0; i < count; i++) {if (i % 5 == 0) {canvas.drawLine(0f, y, 0, y + 20f, paint);canvas.drawText(String.valueOf(i / 5 + 1), -4f, y + 55f, tmpPaint);} else {canvas.drawLine(0f, y, 0f, y + 15f, tmpPaint);}canvas.rotate(360 / count, 0f, 0f); // 旋轉畫紙}// 繪制指針tmpPaint.setColor(Color.GRAY);tmpPaint.setStrokeWidth(4);canvas.drawCircle(0, 0, 20, tmpPaint);tmpPaint.setStyle(Style.FILL);tmpPaint.setColor(Color.YELLOW);canvas.drawCircle(0, 0, 5, tmpPaint);canvas.drawLine(0, 30, 0, -135, paint);} 以上的代碼中,我不知道大家看上去會不會感覺有一點亂,不過沒關系,在下一篇博客中我會對這一塊單獨拿出來說一下。以自定義一個動態時鐘為例詳細說明這部分的內容,大家稍安勿躁。大家可以參看《Android UI編程進階——使用SurfaceViewt和Canvas實現動態時鐘》進行學習。
10.記錄手指運動的路徑
效果圖展示:
實現關鍵代碼:
這一部分的功能實現主要就是考慮三個部分:記錄路徑(這里單獨拿一個變量來保存的原因是因為畫圖的時候會有一個重繪的過程,也就需要擦除后重繪,如果不保存以前的路徑,這樣就可能導致以前的路徑不見了)、記錄事件、繪制。
獲得記錄的路徑:
private ArrayList<PointF> graphics = new ArrayList<PointF>();觸摸事件:public boolean onTouchEvent(MotionEvent event) {graphics.add(new PointF(event.getX(), event.getY()));invalidate(); // 重新繪制區域return true;}繪制:
private void drawFingerPath(Canvas canvas) {for (PointF point : graphics) {canvas.drawPoint(point.x, point.y, paint);}}
源碼下載:
(注:源碼中除了Canvas使用集合的示范外還有畫曲線、正/余弦函數、SurfaceView的使用、心跳。PS:心跳示例需要點擊屏幕才能觸發)
http://download.csdn.net/detail/u013761665/8423823
總結
以上是生活随笔為你收集整理的Android自定义控件前导基础知识学习(一)——Canvas的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Android挂载以点号(.)开头的文件
- 下一篇: Android UI编程进阶——使用Su