本文详细介绍Android平台上的绘图原理及具体实现方法，包括Canvas、Paint和Path的基本使用，以及如何绘制各种几何图形。
第一次见到Android绘图就发现其无非就是Canvas和Paint，也就是画布，和画笔，其中Canvas还用到了Path，Path代表任意多条直线链接而成的任意图形。
以下为在应用程序中绘制几何图形，关键在于一个自定义的view组件MyView，话不多说，直接上代码：
package com.cbg.canvastest;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;
public class MyView extends View {
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
}
// 重写一个方法onDraw
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 把整张画布绘制成白色
canvas.drawColor(Color.WHITE);
// 新建一个画笔
Paint paint = new Paint();
// 去锯齿
paint.setAntiAlias(true);
// 设置画笔颜色
paint.setColor(Color.BLUE);
// 设置空心
paint.setStyle(Paint.Style.STROKE);
//设置空心宽度
paint.setStrokeWidth(3);
//绘制圆形,在指定点画圆形，在（40,40）画半径为30的圆
canvas.drawCircle(40, 40, 30, paint);
// 绘制正方形,前两个代表左上角的坐标，后两个代表右下角的坐标
canvas.drawRect(10, 80, 70, 140, paint);
// 绘制矩形
canvas.drawRect(10, 150, 170, 190, paint);
// 设置个新的长方形，扫描测量
RectF re1 = new RectF(10, 200, 70, 230);
// 绘制圆角矩形
canvas.drawRoundRect(re1, 15, 15, paint);
//设置圆角
RectF re1l = new RectF(10, 240, 70, 270);
// 绘制椭圆
canvas.drawOval(re1l, paint);
// 定义一个path对象，封闭成一个三角形
Path path1 = new Path();
path1.moveTo(10, 340);// 此点为多边形的起点
path1.lineTo(70, 340);
path1.lineTo(40, 290);
path1.close();// 使这些点构成封闭的多边形
// 根据path进行绘制，绘制三角形
canvas.drawPath(path1, paint);
// 定义一个path封成五角星
Path path2 = new Path();
path2.moveTo(26, 360);
path2.lineTo(54, 360);
path2.lineTo(70, 392);
path2.lineTo(40, 420);
path2.lineTo(10, 392);
path2.close();
// 根据path进行绘制，绘制五角星
canvas.drawPath(path2, paint);
// 设置填充风格后绘制
paint.setStyle(Paint.Style.FILL);//笔画为填充满
paint.setColor(Color.RED);//画笔设置为红色
canvas.drawCircle(120, 40, 30, paint);
// 绘制正方形
canvas.drawRect(90, 80, 70, 140, paint);
// 绘制矩形
canvas.drawRect(90, 150, 150, 190, paint);
RectF re2 = new RectF(90, 200, 150, 230);
// 绘制圆角矩形
canvas.drawRoundRect(re2, 15, 15, paint);
RectF re2l = new RectF(90, 240, 150, 270);
// 绘制椭圆
canvas.drawOval(re2l, paint);
// 定义一个path对象，封闭成一个三角形
Path path3 = new Path();
path3.moveTo(90, 340);
path3.lineTo(150, 340);
path3.lineTo(120, 290);
path3.close();
// 根据path进行绘制，绘制三角形
canvas.drawPath(path1, paint);
// 定义一个path封成五角星
Path path4 = new Path();
path4.moveTo(106, 360);
path4.lineTo(134, 360);
path4.lineTo(150, 392);
path4.lineTo(120, 420);
path4.lineTo(90, 392);
path4.close();
// 绘制五角形
canvas.drawPath(path4, paint);
// 为paint设置渐变器
Shader mShader = new LinearGradient(0, 0, 40, 60, new int[] {
Color.RED, Color.GREEN, Color.BLUE }, null,
Shader.TileMode.REPEAT);
paint.setShader(mShader);
paint.setShadowLayer(45, 10, 10, Color.GRAY);
// 绘制圆形
canvas.drawCircle(200, 40, 30, paint);
// 绘制正方形
canvas.drawRect(170, 80, 230, 140, paint);
// 绘制矩形
canvas.drawRect(170, 150, 230, 190, paint);
RectF re3 = new RectF(170, 200, 230, 230);
// 绘制圆角矩形
canvas.drawRoundRect(re3, 15, 15, paint);
RectF re3l = new RectF(170, 240, 230, 270);
// 绘制椭圆
canvas.drawOval(re3l, paint);
// 定义一个path对象，封闭成一个三角形
Path path5 = new Path();
path5.moveTo(170, 340);
path5.lineTo(230, 340);
path5.lineTo(200, 290);
path5.close();
// 根据path进行绘制，绘制三角形
canvas.drawPath(path1, paint);
// 定义一个path封成五角星
Path path6 = new Path();
path6.moveTo(186, 360);
path6.lineTo(214, 360);
path6.lineTo(230, 392);
path6.lineTo(200, 420);
path6.lineTo(170, 392);
path6.close();
// 根据path进行绘制，绘制五角星
canvas.drawPath(path6, paint);
paint.setTextSize(24);
paint.setShader(null);
canvas.drawText("圆形", 240, 50, paint);
canvas.drawText("正方形", 240, 120, paint);
canvas.drawText("长方形", 240, 175, paint);
canvas.drawText("圆角矩形", 230, 220, paint);
canvas.drawText("椭圆形", 240, 260, paint);
canvas.drawText("三角形", 240, 325, paint);
canvas.drawText("五角形", 240, 390, paint);
}
}
关于其他属性我收集了一些：
1、Path对象
在代码中我们看到了我们新建了一个Paint画笔对象，对于画笔对象，它有很多设置属性的：
void setARGB(int a, int r, int g, int b) 设置Paint对象颜色，参数一为alpha透明通道
void setAlpha(int a) 设置alpha不透明度，范围为0~255
void setAntiAlias(boolean aa) //是否抗锯齿，默认值是false
void setColor(int color) //设置颜色，这里Android内部定义的有Color类包含了一些常见颜色定义
void setFakeBoldText(boolean fakeBoldText) //设置伪粗体文本
void setLinearText(boolean linearText) //设置线性文本
PathEffect setPathEffect(PathEffect effect) //设置路径效果
Rasterizer setRasterizer(Rasterizer rasterizer) //设置光栅化
Shader setShader(Shader shader) //设置阴影 ,我们在后面会详细说一下Shader对象的
void setTextAlign(Paint.Align align) //设置文本对齐
void setTextScaleX(float scaleX) //设置文本缩放倍数，1.0f为原始
void setTextSize(float textSize) //设置字体大小
Typeface setTypeface(Typeface typeface) //设置字体，Typeface包含了字体的类型，粗细，还有倾斜、颜色等
注：
Paint mp = new paint();
mp.setTypeface(Typeface.DEFAULT_BOLD)
常用的字体类型名称还有：
Typeface.DEFAULT //常规字体类型
Typeface.DEFAULT_BOLD //黑体字体类型
Typeface.MONOSPACE //等宽字体类型
Typeface.SANS_SERIF //sans serif字体类型
Typeface.SERIF //serif字体类型
除了字体类型设置之外，还可以为字体类型设置字体风格，如设置粗体：
Paint mp = new Paint();
Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
p.setTypeface( font );
常用的字体风格名称还有：
Typeface.BOLD //粗体
Typeface.BOLD_ITALIC //粗斜体
Typeface.ITALIC //斜体
Typeface.NORMAL //常规
void setUnderlineText(boolean underlineText) //设置下划线
void setStyle(Style style) //设置画笔样式
注：
常用的样式
Paint.Style.FILL
Paint.Style.STROKE
Paint.Style.FILL_AND_STROKE
这里的FILL和STROKE两种方式用的最多，他们的区别也很好理解的，FILL就是填充的意思，STROKE就是空心的意思，只有 图形的轮廓形状，内部是空的。
void setStrokeWidth(float width) //在画笔的样式为STROKE的时候，图形的轮廓宽度
2、Canvas对象
对于画布对象Canvas我们是从onDraw方法中获取到的，所以这里我们就可以看不来了，我们在自定义视图的时候都会继承View类，然后在他的onDraw方法中拿到Canvas对象，进行各种绘制了。下面就来一一看一下各种绘制的方法吧：
首先来看一下如何创建一个画笔对象：
- Paint p = new Paint();
- p.setColor(Color.RED);// 设置红色
1）、画圆(drawCircle)
我们想一下，如果画出一个圆形的话需要哪些要素，学过几何的同学都知道：圆形坐标+半径 就可以确定一个圆形了
- canvas.drawCircle(120, 20, 20, p);
参数二：圆心的y坐标
参数三：圆的半径
参数四：画笔对象
还有一个这里我们设置了画笔是否有锯齿：
- p.setAntiAlias(true);// 设置画笔的锯齿效果。 true是去除，大家一看效果就明白了
2）、画直线(drawLine)
我们想一下，如果画出一个直线的话需要哪些要素，起始点坐标+终点坐标 就可以确定一条直线了
- canvas.drawLine(60, 40, 100, 40, p);// 画线
参数二：起始点的y坐标
参数三：终点的x坐标
参数四：终点的y坐标
参数五：画笔对象
3）、画椭圆(drawOval)
我们想一下，如果画出椭圆的话需要哪些要素，长轴+短轴的长度
- RectF oval1=new RectF(150,20,180,40);
- canvas.drawOval(oval2, p);
参数一：椭圆的外接矩形
参数二：画笔对象
这里先来说一下RectF的相关知识吧：在绘图中这个对象是十分重要的，它表示的是一个矩形，它有四个参数：
left,top,right,bottom
这四个值是相对于设备屏幕的起始点开始的。
- RectF oval1=new RectF(150,20,180,40);
矩形的左上角的坐标是：(150,20)
矩形的右下角的坐标是：(180,30)
那么我们就知道这个矩形的宽是：180-150=30；高是：40-20=20
其实还有与RectF对象对应的还有一个对象：Rect,它也是四个参数，和RectF唯一的区别就是，Rect中的参数是float类型的，RectF中的参数是int类型的
那么一个矩形就可以确定一个椭圆的，这个矩形就是和这个椭圆外接：
那么椭圆的长轴就是矩形的宽，短轴就是矩形的高
这样就可以确定一个椭圆了，那么如果我们想画一个圆形的话用这种方式也是可以的，只要把RectF设置成正方形就可以了。
4）、画弧线/画扇形(drawArc)
我们想一下，如果画出一个弧线的话需要哪些要素，起始的弧度+弧线的弧度+外围的矩形大小
这个和上面画椭圆很相似的，就相当于在他的基础上多了其实弧度+弧线的弧度
- p.setStyle(Paint.Style.STROKE);//设置空心
- RectF oval1=new RectF(150,20,180,40);
- canvas.drawArc(oval1, 180, 180, false, p);//小弧形
参数一：外接弧形的矩形
参数二：弧线开始的弧度
参数三：弧线的弧度
参数四：是一个boolean类型的参数：true的时候画扇形，是false的时候画弧线
参数五：画笔对象
5）、画矩形(drawRect)
- RectF oval1=new RectF(150,20,180,40);
- canvas.drawRect(oval1, p);
参数二：画笔对象
6）、画圆角矩形(drawRoundRect)
- RectF oval3 = new RectF(80, 260, 200, 300);// 设置个新的长方形
- canvas.drawRoundRect(oval3, 20, 15, p);//第二个参数是x半径，第三个参数是y半径
参数二：圆角的x半径(椭圆的长轴的一半)
参数三：圆角的y半径(椭圆的短轴的一半)
参数四：画笔对象
其实这个和正常的矩形不一样的是：在四个角是有弧度的，那么弧度的话，就会想到椭圆了，我们在上面说道椭圆的几个要素：长轴和短轴，那么这里就是取长轴的一半和短轴的一半。
7）、画三角形/多边形(drawPath)
我们想一下，如果绘制三角形/多边形的话需要哪些要素，能确定多边形的形状最重要的因素就是角，那么这些角就是一个坐标
- Path path = new Path();
- path.moveTo(80, 200);// 此点为多边形的起点
- path.lineTo(120, 250);
- path.lineTo(80, 250);
- path.close(); // 使这些点构成封闭的多边形
- canvas.drawPath(path, p);
参数一：x坐标
参数二：y坐标
路径是多个点相连接的。所以Path提供了两个方法：moveTo和lineTo
moveTo方法的作用是设置我们绘制路径的开始点，如果没有这个方法的调用的话，系统默认的开始点是(0,0)点
lineTo方法就是将路径的上一个坐标点和当前坐标点进行连接，或者可以认为设置多边形的每个角的坐标点
那么对于三角形的话，我们需要三个点即可。
这个画三角形其实我们用上面的画直线的方法也可以实现的，反过来也是，我们用Path对象也是可以画出一条直线的，那么他们的本质区别是：
绘制路径方式的焦点是角(坐标点)
绘制直线的方式的焦点是边(长度)
8）、画点(drawPoint)
- canvas.drawPoint(60, 390, p);//画一个点
- canvas.drawPoints(new float[]{60,400,65,400,70,400}, p);//画多个点
drawPoint
参数一：点的x坐标
参数二：点的y坐标
参数三：画笔对象
drawPoints
参数一：多个点的数组
参数二：画笔对象
9）、画贝塞尔曲线(drawPath)
这种曲线其实我们在开发过程中很少用到，不过在图形学中绘制贝塞尔曲线的时候，我们需要的要素是：起始点+控制点+终点
- Path path2=new Path();
- path2.moveTo(100, 320);//设置Path的起点
- path2.quadTo(150, 310, 170, 400); //设置贝塞尔曲线的控制点坐标和终点坐标
- canvas.drawPath(path2, p);//画出贝塞尔曲线
参数一：控制点的x坐标
参数二：控制点的y坐标
参数三：终点的x坐标
参数四：终点的y坐标
这里需要注意的是，调用moveTo方法来确定开始坐标的，如果没有调用这个方法，那么起始点坐标默认是：(0,0)
10）、绘制图片(drawBitmap)
- //画图片，就是贴图
- Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
- canvas.drawBitmap(bitmap, 250,360, p);
参数二：图片相对于设备屏幕的left值
参数二：图片相对于设备屏幕的top值
其实我们可以把图片认为是一个矩形，因为图片本身是有长度和宽度的，所以这里只需要矩形的左上角的坐标点，就可以确定这张图片在屏幕中的位置了。
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
