好久之前就想写博客,分享一些自己的总结体会,可总是因为工作忙+本人懒惰才一直没写。以后准备每月写1~2篇博客吧,希望自己能坚持下去。好了废话不多说直接上canvas绘制效果图及代码。
Canvas与Paint介绍
在Android中把Canvas当做画布、Paint当做画笔,那么就可以在画布上用画笔绘制我们想要的任何东西。我们可以设置一些画布/画笔的属性,比如:画布的颜色、画笔的抗锯齿等。使用Canvas画图,一般绘图都是在自定义view中使用,特别是onDraw(Canvas canvas)方法中,使用参数canvas这个画布进行绘制图型,该方法里面就是绘制图形的过程。如下图所示就是我进行绘制的效果图、在其下有对应源码。
Canvas绘制文字
- drawText(String s, int x, int y, Paint paint)
canvas绘制字体比较简单,直接调用drawText(String s, int x, int y, Paint p)方法,其参数分别是:s->待绘制的文字,x->文字在屏幕上的横坐标,y->文字在屏幕上的纵坐标,paint->绘制文字的画笔。
// 创建画笔
Paint textPaint = new Paint();
textPaint.setColor(Color.BLACK);//设置黑色
textPaint.setTextSize(60); //设置字体大小为100像素点
//画字
canvas.drawText("画圆(圆环)", 30, 200, textPaint);
canvas.drawText("画线(虚线)", 30, 400, textPaint);
canvas.drawText("画圆角矩形(文字居中)", 30, 600, textPaint);
canvas.drawText("画图片(旋转)", 30, 1000, textPaint);
canvas.drawText("画椭圆(三角形)", 30, 1350, textPaint);
Canvas绘制圆、圆环
- drawCircle(int x, int y, int r, Paint paint)
canvas绘制圆环其原理就是绘制小圆覆盖大圆形成圆环效果,先画大圆在此基础上再画小圆。调用drawCircle(int r, int x, int y, Paint paint)方法来,其参数分别是:x->圆心在屏幕上的横坐标,y->圆心在屏幕上的纵坐标,r->圆的半径,paint->绘制文字的画笔。在这里画笔抗锯齿尤为重要,会使圆环边缘光滑。
//创建红画笔
Paint redPaint = new Paint();
redPaint.setColor(Color.RED);// 设置红色
redPaint.setAntiAlias(true); //抗锯齿
redPaint.setStrokeWidth(4); //画笔粗细为4像素点
//创建黄画笔
Paint yellowPaint = new Paint();
yellowPaint.setColor(Color.YELLOW);// 设置黄色
yellowPaint.setAntiAlias(true); //抗锯齿
yellowPaint.setStrokeWidth(4); //画笔粗细为4像素点
//画大圆
canvas.drawCircle(600, 150, 100, redPaint);
//画小圆
canvas.drawCircle(600, 150, 80, yellowPaint);
//...
canvas.drawCircle(600, 150, 60, redPaint);
canvas.drawCircle(600, 150, 40, yellowPaint);
canvas.drawCircle(600, 150, 20, redPaint);
Canvas绘制直线、虚线
- drawLine (float startX, float startY, float stopX, float stopY, Paint paint)
drawLine实现线的绘制。startX->起始端点的X坐标,startY->起始端点的Y坐标,stopX->终止端点的X坐标,stopY->终止端点的Y坐标。 - drawPath(Path path, Paint paint)
drawPath实现直线、虚线与多边形绘制。
paint.setStyle ( Paint.Style.STROKE ) ; //绘制直线
paint.setPathEffect ( new DashPathEffect ( new float [ ] { 6, 3 }, 0 ) ) ; //设置虚线效果
在设置虚线效果里的float数组的意思是:先画长度为6的实线再间隔长度为3的空白,之后一直重复这个单元。这个数组的长度只要大于等于2就行,你可以设置多个数值,产生不同效果,最后这个0指的是与起始位置的偏移量。
//创建蓝画笔
Paint bluePaint = new Paint();
bluePaint.setStyle(Paint.Style.STROKE);/绘制直线
bluePaint.setColor(Color.BLUE);
bluePaint.setStrokeWidth(9); //画笔粗细为9像素点
//划线
canvas.drawLine(400, 400, 600, 400, bluePaint);
//画虚线
Path path = new Path();
path.moveTo(700, 400);
path.lineTo(900, 400);
PathEffect effects = new DashPathEffect(new float[]{16,4},0);
bluePaint.setPathEffect(effects);
canvas.drawPath(path, bluePaint);
Canvas绘制矩形、圆角矩形
- Rect(int left, int top, int right, int bottom)
Rect是使用int类型作为数值参数,因在android中两点确定一个矩形区域,参数是待绘制矩形区域左上和右下两点的坐标。 - RectF(float left, float top, float right, float bottom)
RectF是使用float类型作为数值参数,Rect和RectF绘制矩形精度不一样,其参数也是是待绘制矩形区域左上和右下两点的坐标。 - drawRect(RectF rect, Paint paint-)
drawRect实现矩形绘制,rect->RectF对象,paint->画笔。 - drawRoundRect (RectF rect, float rx, float ry, Paint paint)
drawRoundRect实现圆角矩形绘制,rect->RectF对象,rx->x方向上的圆角半径,ry->y方向上的圆角半径,paint->画笔。
//创建绿画笔
Paint greenPaint = new Paint();
greenPaint.setColor(Color.GREEN);
greenPaint.setAntiAlias(true); //抗锯齿
//画矩形
Rect rect = new Rect();
rect.top = 660;
rect.bottom = 900;
rect.left = 100;
rect.right = 500;
canvas.drawRect(rect, greenPaint);
//画圆角矩形
RectF rectF = new RectF();
rectF.top = 660;
rectF.bottom = 900;
rectF.left = 600;
rectF.right = 1000;
canvas.drawRoundRect(rectF, 50, 40, greenPaint);
Canvas绘制矩形文字居中
矩形内文字居中需要实现水平和垂直方向的居中。设置文字水平居中调用画笔的setTextAlign(Paint.Align.CENTER)即可。设置文字垂直居中则要计算文字左上角Y轴坐标值,参考大牛hursing写的一篇博文可知实现居中文字左上角Y轴坐标:
(rectF.bottom + rectF.top - fontMetrics.bottom - fontMetrics.top)/2
hursing分析实现矩形文字居中链接:http://blog.csdn.net/hursing/article/details/18703599。
//文字居中
Paint fondPaint = new Paint();
fondPaint.setColor(Color.RED);
fondPaint.setTextSize(60);
//设置文字水平居中
fondPaint.setTextAlign(Paint.Align.CENTER);
//设置文字垂直居中
FontMetricsInt fontMetrics = fondPaint.getFontMetricsInt();
float baseRect = (rect.bottom + rect.top - fontMetrics.bottom - fontMetrics.top)/2;
float baseRectF = (rectF.bottom + rectF.top - fontMetrics.bottom - fontMetrics.top)/2;
canvas.drawText("矩形居中", rect.centerX(), baseRect, fondPaint);
canvas.drawText("圆角~居中", rectF.centerX(), baseRectF, fondPaint);
Canvas绘制图片、图片旋转
- drawBitmap(Bitmap bitmap, float left, float top, Paint paint)
drawBitmap实现图片绘制, bitmap->图片资源,left->偏移左边的位置,top-> 偏移顶部的位置,paint->画笔。
//获取图片
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ruler);
//画图片
canvas.drawBitmap(bitmap, 200,1050, null);
//画旋转90图片
Matrix matrix = new Matrix();
matrix.postRotate(90);
// 创建新的图片
Bitmap rotatedBitmap = Bitmap.createBitmap(bitmap, 0, 0,
bitmap.getWidth(), bitmap.getHeight(), matrix, true);
canvas.drawBitmap(rotatedBitmap, 600, 1050, null);
Canvas绘制多边形
- drawOval(RectF oval, Paint paint)
drawOval实现椭圆绘制,oval->RectF对象,是左上和右下两点确定的一块椭圆区域,paint->画笔。 - drawPath(Path path, Paint paint)
drawPath实现多边形绘制。path->包含路径信息的Path对象,paint->画笔。 - path常用方法:
moveTo(int x, int y)->其参数(x,y)代表起点坐标。
lineTo(int x, int y)->连接上一个点到当前点(x,y)之间的直线。
setLastPoint(int x, int y)->重置最后一个点的位置为(x,y)。
close()->从最后一个点连接最初的一个点,形成一个闭合区域。
//画椭圆
RectF oval=new RectF(100,1400,400,1550);
canvas.drawOval(oval, yellowPaint);
//画三角
Path path2 = new Path();
path2.moveTo(800, 1400);// 此点为多边形的起点
path2.lineTo(600, 1550);
path2.lineTo(1000, 1550);
path2.close(); // 使这些点构成封闭的多边形
canvas.drawPath(path2, yellowPaint);
//画多边形
Path path3 = new Path();
path3.moveTo(500, 1600);// 此点为多边形的起点
path3.lineTo(300, 1700);
path3.lineTo(500, 1800);
path3.lineTo(700, 1700);
path3.close(); // 使这些点构成封闭的多边形
canvas.drawPath(path3, yellowPaint);
本文只介绍Canvas绘图的基础使用,请大家多多指教
转载请注明出处:http://blog.csdn.net/allen_6/article/details/78255782