Android之canvas详解
首先說一下canvas類：
Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, Path, text, Bitmap), and a paint (to describe the colors and styles for the drawing).這個類相當(dāng)于一個畫布，你可以在里面畫很多東西；
我們可以把這個Canvas理解成系統(tǒng)提供給我們的一塊內(nèi)存區(qū)域(但實(shí)際上它只是一套畫圖的API，真正的內(nèi)存是下面的Bitmap)，而且它還提供了一整套對這個內(nèi)存區(qū)域進(jìn)行操作的方法，所有的這些操作都是畫圖API。也就是說在這種方式下我們已經(jīng)能一筆一劃或者使用Graphic來畫我們所需要的東西了，要畫什么要顯示什么都由我們自己控制。
這種方式根據(jù)環(huán)境還分為兩種：一種就是使用普通View的canvas畫圖，還有一種就是使用專門的SurfaceView的canvas來畫圖。兩種的主要是區(qū)別就是可以在SurfaceView中定義一個專門的線程來完成畫圖工作，應(yīng)用程序不需要等待View的刷圖，提高性能。前面一種適合處理量比較小，幀率比較小的動畫，比如說象棋游戲之類的；而后一種主要用在游戲，高品質(zhì)動畫方面的畫圖。
下面是Canvas類常用的方法
drawRect(RectF rect, Paint paint) //繪制區(qū)域，參數(shù)一為RectF一個區(qū)域
drawPath(Path path, Paint paint) //繪制一個路徑，參數(shù)一為Path路徑對象
drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint) //貼圖，參數(shù)一就是我們常規(guī)的Bitmap對象，參數(shù)二是源區(qū)域(這里是bitmap)，參數(shù)三是目標(biāo)區(qū)域(應(yīng)該在canvas的位置和大小)，參數(shù)四是Paint畫刷對象，因?yàn)橛玫搅丝s放和拉伸的可能，當(dāng)原始Rect不等于目標(biāo)Rect時性能將會有大幅損失。
drawLine(float startX, float startY, float stopX, float stopY, Paintpaint) //畫線，參數(shù)一起始點(diǎn)的x軸位置，參數(shù)二起始點(diǎn)的y軸位置，參數(shù)三終點(diǎn)的x軸水平位置，參數(shù)四y軸垂直位置，最后一個參數(shù)為Paint 畫刷對象。
drawPoint(float x, float y, Paint paint) //畫點(diǎn)，參數(shù)一水平x軸，參數(shù)二垂直y軸，第三個參數(shù)為Paint對象。
drawText(String text, float x, floaty, Paint paint) //渲染文本，Canvas類除了上面的還可以描繪文字，參數(shù)一是String類型的文本，參數(shù)二x軸，參數(shù)三y軸，參數(shù)四是Paint對象。
drawOval(RectF oval, Paint paint)//畫橢圓，參數(shù)一是掃描區(qū)域，參數(shù)二為paint對象；
drawCircle(float cx, float cy, float radius,Paint paint)// 繪制圓，參數(shù)一是中心點(diǎn)的x軸，參數(shù)二是中心點(diǎn)的y軸，參數(shù)三是半徑，參數(shù)四是paint對象；
drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)//畫弧，參數(shù)一是RectF對象，一個矩形區(qū)域橢圓形的界限用于定義在形狀、大小、電弧，參數(shù)二是起始角(度)在電弧的開始，
參數(shù)三掃描角(度)開始順時針測量的，參數(shù)四是如果這是真的話,包括橢圓中心的電弧,并關(guān)閉它,如果它是假這將是一個弧線,參數(shù)五是Paint對象；
還要理解一個paint類：
Class Overview The Paint class holds the style and color information about how to draw geometries, text and bitmaps. paint類擁有風(fēng)格和顏色信息如何繪制幾何學(xué),文本和位圖。 Paint 代表了Canvas上的畫筆、畫刷、顏料等等； Paint類常用方法: setARGB(int a, int r, int g, int b) // 設(shè)置 Paint對象顏色，參數(shù)一為alpha透明值 setAlpha(int a) // 設(shè)置alpha不透明度，范圍為0~255 setAntiAlias(boolean aa) // 是否抗鋸齒 setColor(int color) // 設(shè)置顏色，這里Android內(nèi)部定義的有Color類包含了一些常見顏色定義 setTextScaleX(float scaleX) // 設(shè)置文本縮放倍數(shù)，1.0f為原始 setTextSize(float textSize) // 設(shè)置字體大小 setUnderlineText(booleanunderlineText) // 設(shè)置下劃線案例
看一下效果圖：
CustomActivity.java
public class CustomActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); init(); } private void init() { LinearLayout layout=(LinearLayout) findViewById(R.id.root); final DrawView view=new DrawView(this); view.setMinimumHeight(500); view.setMinimumWidth(300); //通知view組件重繪 view.invalidate(); layout.addView(view); } }重要的類自定義View組件要重寫View組件的onDraw(Canvase)方法，接下來是在該 Canvas上繪制大量的幾何圖形，點(diǎn)、直線、弧、圓、橢圓、文字、矩形、多邊形、曲線、圓角矩形，等各種形狀！
DrawView.java
參考鏈接
Android利用canvas畫各種圖形(點(diǎn)、直線、弧、圓、橢圓、文字、矩形、多邊形、曲線、圓角矩形) - 任海麗(3G/移動開發(fā)) - 博客頻道 - CSDN.NET
道Canvas可以繪制的對象有：
弧線(arcs)、填充顏色(argb和color)、 Bitmap、圓(circle和oval)、點(diǎn)(point)、線(line)、矩形(Rect)、圖片(Picture)、圓角矩形 (RoundRect)、文本(text)、頂點(diǎn)(Vertices)、路徑(path)。通過組合這些對象我們可以畫出一些簡單有趣的界面出來，但是光有這些功能還是不夠的，如果我要畫一個儀表盤(數(shù)字圍繞顯示在一個圓圈中)呢？ 幸好Android還提供了一些對Canvas位置轉(zhuǎn)換的方法：rorate、scale、translate、skew(扭曲)等，而且它允許你通過獲得它的轉(zhuǎn)換矩陣對象(getMatrix方法，不知道什么是轉(zhuǎn)換矩陣？看這里) 直接操作它。這些操作就像是雖然你的筆還是原來的地方畫，但是畫紙旋轉(zhuǎn)或者移動了，所以你畫的東西的方位就產(chǎn)生變化。為了方便一些轉(zhuǎn)換操作，Canvas 還提供了保存和回滾屬性的方法(save和restore)，比如你可以先保存目前畫紙的位置(save)，然后旋轉(zhuǎn)90度，向下移動100像素后畫一些圖形，畫完后調(diào)用restore方法返回到剛才保存的位置。下面我們就演示下canvas的一些簡單用法：
protected void onDraw(Canvas canvas) { canvas.drawCircle(100, 100, 90, paint); }效果
@Override protected void onDraw(Canvas canvas) { //繪制弧線區(qū)域 RectF rect = new RectF(0, 0, 100, 100); canvas.drawArc(rect, //弧線所使用的矩形區(qū)域大小 0, //開始角度 90, //掃過的角度 false, //是否使用中心 paint); }效果
protected void onDraw(Canvas canvas) { //繪制弧線區(qū)域 RectF rect = new RectF(0, 0, 100, 100); canvas.drawArc(rect, //弧線所使用的矩形區(qū)域大小 0, //開始角度 90, //掃過的角度 true, //是否使用中心 paint); }兩圖對比我們可以發(fā)現(xiàn)，當(dāng) drawArcs(rect,startAngel,sweepAngel,useCenter,paint)中的useCenter為false時，弧線區(qū)域是用弧線開始角度和結(jié)束角度直接連接起來的，當(dāng)useCenter為true時，是弧線開始角度和結(jié)束角度都與中心點(diǎn)連接，形成一個扇形。
protected void onDraw(Canvas canvas) { canvas.drawColor(Color.BLUE); }canvas.drawColor是直接將View顯示區(qū)域用某個顏色填充滿。
@Override protected void onDraw(Canvas canvas) { //畫一條線 canvas.drawLine(10, 10, 100, 100, paint); }Canvas.drawOval：
@Override protected void onDraw(Canvas canvas) { //定義一個矩形區(qū)域 RectF oval = new RectF(0,0,200,300); //矩形區(qū)域內(nèi)切橢圓 canvas.drawOval(oval, paint); }canvas.drawPosText：
@Override protected void onDraw(Canvas canvas) { //按照既定點(diǎn) 繪制文本內(nèi)容 canvas.drawPosText("Android777", new float[]{ 10,10, //第一個字母在坐標(biāo)10,10 20,20, //第二個字母在坐標(biāo)20,20 30,30, //.... 40,40, 50,50, 60,60, 70,70, 80,80, 90,90, 100,100 }, paint); }canvas.drawRect：
@Override protected void onDraw(Canvas canvas) { RectF rect = new RectF(50, 50, 200, 200); canvas.drawRect(rect, paint); } }rect的參數(shù)是表示左上角與右下角的坐標(biāo)
canvas.drawRoundRect：
@Override protected void onDraw(Canvas canvas) { RectF rect = new RectF(50, 50, 200, 200); canvas.drawRoundRect(rect, 30, //x軸的半徑 30, //y軸的半徑 paint); }canvas.drawPath：
@Override protected void onDraw(Canvas canvas) { Path path = new Path(); //定義一條路徑 path.moveTo(10, 10); //移動到 坐標(biāo)10,10 path.lineTo(50, 60); path.lineTo(200,80); path.lineTo(10, 10); canvas.drawPath(path, paint); }canvas.drawTextOnPath：
@Override protected void onDraw(Canvas canvas) { Path path = new Path(); //定義一條路徑 path.moveTo(10, 10); //移動到 坐標(biāo)10,10 path.lineTo(50, 60); path.lineTo(200,80); path.lineTo(10, 10); // canvas.drawPath(path, paint); canvas.drawTextOnPath("Android777開發(fā)者博客", path, 10, 10, paint); }位置轉(zhuǎn)換方法，canvas.rorate和canvas.translate：
@Override protected void onDraw(Canvas canvas) { paint.setAntiAlias(true); paint.setStyle(Style.STROKE); canvas.translate(canvas.getWidth()/2, 200); //將位置移動畫紙的坐標(biāo)點(diǎn):150,150 canvas.drawCircle(0, 0, 100, paint); //畫圓圈 //使用path繪制路徑文字 canvas.save(); canvas.translate(-75, -75); Path path = new Path(); path.addArc(new RectF(0,0,150,150), -180, 180); Paint citePaint = new Paint(paint); citePaint.setTextSize(14); citePaint.setStrokeWidth(1); canvas.drawTextOnPath("http://www.android777.com", path, 28, 0, citePaint); canvas.restore(); 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); //旋轉(zhuǎn)畫紙 } //繪制指針 tmpPaint.setColor(Color.GRAY); tmpPaint.setStrokeWidth(4); canvas.drawCircle(0, 0, 7, tmpPaint); tmpPaint.setStyle(Style.FILL); tmpPaint.setColor(Color.YELLOW); canvas.drawCircle(0, 0, 5, tmpPaint); canvas.drawLine(0, 10, 0, -65, paint); }上面幾個例子基本已經(jīng)將常用的canvas.draw*方法測試過了，我們結(jié)合一些事件，做一些有用戶交互的應(yīng)用：
package com.android777.demo.uicontroller.graphics; import java.util.ArrayList; import android.app.Activity; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.PointF; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; public class CanvasDemoActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(new CustomView1(this)); } /** * 使用內(nèi)部類 自定義一個簡單的View * @author Administrator * */class CustomView1 extends View{ Paint paint; private ArrayList<PointF> graphics = new ArrayList<PointF>(); PointF point; public CustomView1(Context context) { super(context); paint = new Paint(); //設(shè)置一個筆刷大小是3的黃色的畫筆 paint.setColor(Color.YELLOW); paint.setStrokeJoin(Paint.Join.ROUND); paint.setStrokeCap(Paint.Cap.ROUND); paint.setStrokeWidth(3); } @Override public boolean onTouchEvent(MotionEvent event) { graphics.add(new PointF(event.getX(),event.getY())); invalidate(); //重新繪制區(qū)域 return true; } //在這里我們將測試canvas提供的繪制圖形方法 @Override protected void onDraw(Canvas canvas) { for (PointF point : graphics) { canvas.drawPoint(point.x, point.y, paint); } // super.onDraw(canvas); } } }當(dāng)用戶點(diǎn)擊時將出現(xiàn)一個小點(diǎn)，拖動時將畫出一條用細(xì)點(diǎn)組成的虛線：
參考鏈接
Android Canvas繪圖詳解（圖文） - 泡在網(wǎng)上的日子
Android利用canvas畫各種圖形(點(diǎn)、直線、弧、圓、橢圓、文字、矩形、多邊形、曲線、圓角矩形) - 任海麗(3G/移動開發(fā)) - 博客頻道 - CSDN.NET
完成
總結(jié)
以上是生活随笔為你收集整理的Android之canvas详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《Python快速入门》6大数据类型详解
- 下一篇： Android实现圆形圆角图片