1、首先說一下canvas類:
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).
這個類相當于一個畫布,你可以在里面畫很多東西;
我們可以把這個Canvas理解成系統(tǒng)提供給我們的一塊內(nèi)存區(qū)域(但實際上它只是一套畫圖的API,真正的內(nèi)存是下面的Bitmap),而且它還提供了一整套對這個內(nèi)存區(qū)域進行操作的方法,所有的這些操作都是畫圖API。也就是說在這種方式下我們已經(jīng)能一筆一劃或者使用Graphic來畫我們所需要的東西了,要畫什么要顯示什么都由我們自己控制。
這種方式根據(jù)環(huán)境還分為兩種:一種就是使用普通View的canvas畫圖,還有一種就是使用專門的SurfaceView的canvas來畫圖。兩種的主要是區(qū)別就是可以在SurfaceView中定義一個專門的線程來完成畫圖工作,應用程序不需要等待View的刷圖,提高性能。前面一種適合處理量比較小,幀率比較小的動畫,比如說象棋游戲之類的;而后一種主要用在游戲,高品質動畫方面的畫圖。
下面是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ù)三是目標區(qū)域(應該在canvas的位置和大小),參數(shù)四是Paint畫刷對象,因為用到了縮放和拉伸的可能,當原始Rect不等于目標Rect時性能將會有大幅損失。
drawLine(float startX, float startY, float stopX, float stopY, Paintpaint) //畫線,參數(shù)一起始點的x軸位置,參數(shù)二起始點的y軸位置,參數(shù)三終點的x軸水平位置,參數(shù)四y軸垂直位置,最后一個參數(shù)為Paint 畫刷對象。
drawPoint(float x, float y, Paint paint) //畫點,參數(shù)一水平x軸,參數(shù)二垂直y軸,第三個參數(shù)為Paint對象。
drawText(String text, float x, floaty, Paint paint)? //渲染文本,Canvas類除了上面的還可以描繪文字,參數(shù)一是String類型的文本,參數(shù)二x軸,參數(shù)三y軸,參數(shù)四是Paint對象。
drawOval(RectFoval,Paintpaint)//畫橢圓,參數(shù)一是掃描區(qū)域,參數(shù)二為paint對象;
drawCircle(float cx, float cy, float radius,Paintpaint)// 繪制圓,參數(shù)一是中心點的x軸,參數(shù)二是中心點的y軸,參數(shù)三是半徑,參數(shù)四是paint對象;
drawArc(RectFoval, float startAngle, float sweepAngle, boolean useCenter,Paintpaint)//畫弧,
參數(shù)一是RectF對象,一個矩形區(qū)域橢圓形的界限用于定義在形狀、大小、電弧,參數(shù)二是起始角(度)在電弧的開始,
參數(shù)三掃描角(度)開始順時針測量的,參數(shù)四是如果這是真的話,包括橢圓中心的電弧,并關閉它,如果它是假這將是一個弧線,參數(shù)五是Paint對象;
還要理解一個paint類:
The Paint class holds the style and color information about how to draw geometries, text and bitmaps.
paint類擁有風格和顏色信息如何繪制幾何學,文本和位圖。
Paint 代表了Canvas上的畫筆、畫刷、顏料等等;
Paint類常用方法:
setARGB(int a, int r, int g, int b) // 設置 Paint對象顏色,參數(shù)一為alpha透明值
setAlpha(int a) // 設置alpha不透明度,范圍為0~255
setAntiAlias(boolean aa) // 是否抗鋸齒
setColor(int color)? // 設置顏色,這里Android內(nèi)部定義的有Color類包含了一些常見顏色定義
setTextScaleX(float scaleX)? // 設置文本縮放倍數(shù),1.0f為原始
setTextSize(float textSize)? // 設置字體大小
setUnderlineText(booleanunderlineText)? // 設置下劃線
2、直接看案例
看一下效果圖:
在此案例中我們用到的是自定義view類;
CustomActivity.Java
[java]view plaincopy
publicclassCustomActivityextendsActivity?{
@Override
publicvoidonCreate(Bundle?savedInstanceState)?{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
init();
}
privatevoidinit()?{
LinearLayout?layout=(LinearLayout)?findViewById(R.id.root);
finalDrawView?view=newDrawView(this);
view.setMinimumHeight(500);
view.setMinimumWidth(300);
//通知view組件重繪
view.invalidate();
layout.addView(view);
}
}
重要的類自定義View組件要重寫View組件的onDraw(Canvase)方法,接下來是在該 Canvas上繪制大量的幾何圖形,點、直線、弧、圓、橢圓、文字、矩形、多邊形、曲線、圓角矩形,等各種形狀!
DrawView.java
[java]view plaincopy
publicclassDrawViewextendsView?{
publicDrawView(Context?context)?{
super(context);
}
@Override
protectedvoidonDraw(Canvas?canvas)?{
super.onDraw(canvas);
/*
*?方法?說明?drawRect?繪制矩形?drawCircle?繪制圓形?drawOval?繪制橢圓?drawPath?繪制任意多邊形
*?drawLine?繪制直線?drawPoin?繪制點
*/
//?創(chuàng)建畫筆
Paint?p?=newPaint();
p.setColor(Color.RED);//?設置紅色
canvas.drawText("畫圓:",10,20,?p);//?畫文本
canvas.drawCircle(60,20,10,?p);//?小圓
p.setAntiAlias(true);//?設置畫筆的鋸齒效果。?true是去除,大家一看效果就明白了
canvas.drawCircle(120,20,20,?p);//?大圓
canvas.drawText("畫線及弧線:",10,60,?p);
p.setColor(Color.GREEN);//?設置綠色
canvas.drawLine(60,40,100,40,?p);//?畫線
canvas.drawLine(110,40,190,80,?p);//?斜線
//畫笑臉弧線
p.setStyle(Paint.Style.STROKE);//設置空心
RectF?oval1=newRectF(150,20,180,40);
canvas.drawArc(oval1,180,180,false,?p);//小弧形
oval1.set(190,20,220,40);
canvas.drawArc(oval1,180,180,false,?p);//小弧形
oval1.set(160,30,210,60);
canvas.drawArc(oval1,0,180,false,?p);//小弧形
canvas.drawText("畫矩形:",10,80,?p);
p.setColor(Color.GRAY);//?設置灰色
p.setStyle(Paint.Style.FILL);//設置填滿
canvas.drawRect(60,60,80,80,?p);//?正方形
canvas.drawRect(60,90,160,100,?p);//?長方形
canvas.drawText("畫扇形和橢圓:",10,120,?p);
/*?設置漸變色?這個正方形的顏色是改變的?*/
Shader?mShader?=newLinearGradient(0,0,100,100,
newint[]?{?Color.RED,?Color.GREEN,?Color.BLUE,?Color.YELLOW,
Color.LTGRAY?},null,?Shader.TileMode.REPEAT);//?一個材質,打造出一個線性梯度沿著一條線。
p.setShader(mShader);
//?p.setColor(Color.BLUE);
RectF?oval2?=newRectF(60,100,200,240);//?設置個新的長方形,掃描測量
canvas.drawArc(oval2,200,130,true,?p);
//?畫弧,第一個參數(shù)是RectF:該類是第二個參數(shù)是角度的開始,第三個參數(shù)是多少度,第四個參數(shù)是真的時候畫扇形,是假的時候畫弧線
//畫橢圓,把oval改一下
oval2.set(210,100,250,130);
canvas.drawOval(oval2,?p);
canvas.drawText("畫三角形:",10,200,?p);
//?繪制這個三角形,你可以繪制任意多邊形
Path?path?=newPath();
path.moveTo(80,200);//?此點為多邊形的起點
path.lineTo(120,250);
path.lineTo(80,250);
path.close();//?使這些點構成封閉的多邊形
canvas.drawPath(path,?p);
//?你可以繪制很多任意多邊形,比如下面畫六連形
p.reset();//重置
p.setColor(Color.LTGRAY);
p.setStyle(Paint.Style.STROKE);//設置空心
Path?path1=newPath();
path1.moveTo(180,200);
path1.lineTo(200,200);
path1.lineTo(210,210);
path1.lineTo(200,220);
path1.lineTo(180,220);
path1.lineTo(170,210);
path1.close();//封閉
canvas.drawPath(path1,?p);
/*
*?Path類封裝復合(多輪廓幾何圖形的路徑
*?由直線段*、二次曲線,和三次方曲線,也可畫以油畫。drawPath(路徑、油漆),要么已填充的或撫摸
*?(基于油漆的風格),或者可以用于剪斷或畫畫的文本在路徑。
*/
//畫圓角矩形
p.setStyle(Paint.Style.FILL);//充滿
p.setColor(Color.LTGRAY);
p.setAntiAlias(true);//?設置畫筆的鋸齒效果
canvas.drawText("畫圓角矩形:",10,260,?p);
RectF?oval3?=newRectF(80,260,200,300);//?設置個新的長方形
canvas.drawRoundRect(oval3,20,15,?p);//第二個參數(shù)是x半徑,第三個參數(shù)是y半徑
//畫貝塞爾曲線
canvas.drawText("畫貝塞爾曲線:",10,310,?p);
p.reset();
p.setStyle(Paint.Style.STROKE);
p.setColor(Color.GREEN);
Path?path2=newPath();
path2.moveTo(100,320);//設置Path的起點
path2.quadTo(150,310,170,400);//設置貝塞爾曲線的控制點坐標和終點坐標
canvas.drawPath(path2,?p);//畫出貝塞爾曲線
//畫點
p.setStyle(Paint.Style.FILL);
canvas.drawText("畫點:",10,390,?p);
canvas.drawPoint(60,390,?p);//畫一個點
canvas.drawPoints(newfloat[]{60,400,65,400,70,400},?p);//畫多個點
//畫圖片,就是貼圖
Bitmap?bitmap?=?BitmapFactory.decodeResource(getResources(),?R.drawable.ic_launcher);
canvas.drawBitmap(bitmap,250,360,?p);
}
}