在自定义VIew中经常使用到Canvas对象的方法:
1 绘制点:
public void drawPoint(float x, float y, Paint paint)
x:表示x轴方法的坐标
y:表示y轴方法的坐标 这坐标是相对于它的父view,而不是屏幕
paint:表示你所画点用到的画笔
public void drawPoints(float[] pts,Paint paint) 绘制多个点
pts:是一个float数组,存储的是点的集合
public void drawPoints(float[] pts, int offset, int count,Paint paint)
pts:是一个float数组,存储的是点的集合
offset:集合中跳过的数值个数
count:参与绘制的数值的个数
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint = new Paint();
paint.setColor(Color.parseColor("#00ffff"));
paint.setStrokeWidth(20);
canvas.drawPoint(100, 50, paint);
float[] point = {50, 150, 150, 150, 250, 150};
canvas.drawPoints(point, paint);
float[] points = {50, 250, 150, 250, 250, 250, 350, 250, 450, 250};
canvas.drawPoints(points, 4, 4, paint);
}
2 绘制线
public void drawLine(float startX, float startY, float stopX, float stopY,Paint paint)
startX:第一个点的起始x轴坐标
startY:第一个点的起始y轴坐标
stopX:结束点x轴坐标
stopY:结束点y轴坐标
paint:绘制线所用到的画笔
画多条线
public void drawLines(float[] pts, Paint paint)
pts:drawPoints中的参数是同一意思
public void drawLines(float[] pts, int offset, int count, Paint paint)
pts:同上
offset:和drawPoints是一样
count:和drawPoints是一样
paint:同上
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint = new Paint();
paint.setColor(Color.parseColor("#456456"));
paint.setStrokeWidth(20);
canvas.drawLine(600, 100, 800, 300, paint);
float[] lines = {600, 200, 800, 400, 600, 300, 800, 500};
canvas.drawLines(lines, paint);
float[] pts = {100,100,400,100,400,100,400,400,400,400,100,400,100,400,100,100};
canvas.drawLines(pts,4,12,paint);
}
3 绘制矩形
public void drawRect(float left, float top, float right, float bottom, Paint paint)
left:第一个点距离x轴的距离(单位像素)
top:第一个点距离y轴的距离
right:第二个距离x轴的距离
bottom:第二个点距离y轴的距离
Rect和RectF用法上没什么差别,RectF相比Rect精度更准确
public void drawRect(Rect r, Paint paint)
r就是上面2个点封装成了一个矩形而已。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint = new Paint();
paint.setColor(Color.parseColor("#567354"));
paint.setStrokeWidth(20);
canvas.drawRect(100,100,400,400,paint);
Rect rect = new Rect(500,100,600,400);
canvas.drawRect(rect,paint);
}
4 绘制圆角矩形
public void drawRoundRect(float left, float top, float right, float bottom, float rx, float ry,Paint paint)
left 第一个点x轴方向距离(像素)
top:第一个点y轴方向距离
right:第二个点x轴方向距离
bottom:第二个点y轴方向距离
rx:生成圆角椭圆的x轴半径
ry:生成圆角椭圆的y轴半径
paint:绘制圆角矩形所需的画笔
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(10);
mPaint.setStyle(Paint.Style.STROKE);
canvas.drawRoundRect(100f,100f,600f,600f,20f,20f,mPaint);
}
5 绘制圆
public void drawCircle(float cx, float cy, float radius,Paint paint)
cx:圆心x轴方向距离
cy:圆心y轴方向距离
radius:圆的半径
paint:绘制圆所需的画笔
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint = new Paint();
paint1 = new Paint();
paint.setColor(Color.parseColor("#a23d46"));
paint.setStrokeWidth(2);
paint1.setStyle(Paint.Style.STROKE);
paint1.setStrokeWidth(2);
canvas.drawCircle(200,200,150,paint);
canvas.drawCircle(600,200,150,paint1);
}
6 绘制椭圆
椭圆是根据矩形里面的内切圆就是依赖外面的矩形而形成的
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint = new Paint();
paint.setColor(Color.parseColor("#a23d46"));
paint.setStrokeWidth(2);
RectF rect = new RectF(200,200,600,500);
canvas.drawRect(rect,paint);
paint.setColor(Color.GRAY);
canvas.drawOval(rect,paint);
}
7 绘制弧
弧是根据椭圆来定的,椭圆是根据矩形来定的
public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint)
oval:绘制弧所依赖的矩形
startAngle:弧开始的角度,以X轴正方向为0度
sweepAngle:弧持续的角度
useCenter:是否有弧的两边,True,还两边,False,只有一条弧
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(10);
mPaint.setStyle(Paint.Style.STROKE);
RectF rect = new RectF(100,100,500,400);
canvas.drawArc(rect,0,90,true,mPaint);
}
如果把第四个参数传false
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(10);
mPaint.setStyle(Paint.Style.STROKE);
RectF rect = new RectF(100,100,500,400);
canvas.drawRect(rect,mPaint);
mPaint.setColor(Color.BLUE);
canvas.drawOval(rect,mPaint);
mPaint.setColor(Color.YELLOW);
canvas.drawArc(rect,0,90,true,mPaint);
}
现在看到我们绘制的矩形,我们从中可以得出它的坐标点为圆心点,现在我把弧所持续的角度为-90
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(10);
mPaint.setStyle(Paint.Style.STROKE);
RectF rect = new RectF(100,100,500,400);
canvas.drawRect(rect,mPaint);
mPaint.setColor(Color.BLUE);
canvas.drawOval(rect,mPaint);
mPaint.setColor(Color.YELLOW);
canvas.drawArc(rect,0,-90,true,mPaint);
}
发现当所持续的角度为-90度是逆时针转90的,从这可以得出一个简单的结论:当所持续的角度为正数是顺时针,当所持续的角度为负数时,是逆时针,
现在还有一个参数startAngle就是弧开始的角度,之前是传入0,现在改为90,
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(10);
mPaint.setStyle(Paint.Style.STROKE);
RectF rect = new RectF(100,100,500,400);
canvas.drawRect(rect,mPaint);
mPaint.setColor(Color.BLUE);
canvas.drawOval(rect,mPaint);
mPaint.setColor(Color.YELLOW);
canvas.drawArc(rect,90,-90,true,mPaint);
}
现在画图来解释上面第二个和第三个参数如下图:
8 绘制多边形
public void drawPath(Path path, Paint paint)
path:路径
paint:所画路径需要的画笔
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint = new Paint();
paint.setColor(Color.parseColor("#987452"));
paint.setStrokeWidth(2);
Path path = new Path();
path.moveTo(100,100);
path.lineTo(100,300);
path.lineTo(500,300);
path.close();
canvas.drawPath(path,paint);
}
moveTo()方法是绘制多边形的起点,lineTo()是连接上一个点,构成一条线,path的close()方法一定要记得调用,close()能保证多边形构成的线能闭合,
add()的使用
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint = new Paint();
paint.setColor(Color.parseColor("#987452"));
paint.setStrokeWidth(6);
paint.setStyle(Paint.Style.STROKE);
Path path = new Path();
path.moveTo(100,100);
path.lineTo(100,300);
path.lineTo(500,300);
path.close();
path.addCircle(100,160,30, Path.Direction.CW);
canvas.drawPath(path,paint);
}
9 绘制带文字的多边形
public void drawTextOnPath(String text,Path path, float hOffset,float vOffset,Paint paint)
text:绘制到path上的文字
path:路径
float hOffset : 与路径起始点的水平偏移距离
float vOffset : 与路径中心的垂直偏移量
paint:同上
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint = new Paint();
paint.setColor(Color.parseColor("#987452"));
paint.setStrokeWidth(2);
paint.setStyle(Paint.Style.STROKE);
String text="你们好啊 地球人";
Path path = new Path();
Path path1 = new Path();
path.addCircle(300,300,200, Path.Direction.CCW);
path1.addCircle(800,300,200, Path.Direction.CCW);
canvas.drawPath(path,paint);
canvas.drawPath(path1,paint);
paint.setTextSize(50);//设置字体
paint.setColor(Color.GREEN);
paint.setAntiAlias(true);
canvas.drawTextOnPath(text,path,0,0,paint);
canvas.drawTextOnPath(text,path1,10,10,paint);
}
分析图:
path.addCircle(300,300,200, Path.Direction.CCW);方法的第四个参数讲下,
Path.Direction有两个值:
Path.Direction.CCW:是counter-clockwise缩写,指创建逆时针方向的矩形路径;
Path.Direction.CW:是clockwise的缩写,指创建顺时针方向的矩形路径
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint = new Paint();
paint.setColor(Color.parseColor("#987452"));
paint.setStrokeWidth(2);
paint.setStyle(Paint.Style.STROKE);
String text="你们好啊 地球人";
Path path = new Path();
Path path1 = new Path();
path.addCircle(300,300,200, Path.Direction.CW);
path1.addCircle(800,300,200, Path.Direction.CCW);
canvas.drawPath(path,paint);
canvas.drawPath(path1,paint);
paint.setTextSize(50);//设置字体
paint.setColor(Color.GREEN);
paint.setAntiAlias(true);
canvas.drawTextOnPath(text,path,0,0,paint);
canvas.drawTextOnPath(text,path1,10,10,paint);
}
10 绘制文字
这里就不讲drawText()了,在讲Paint中这个讲的比较详细,可以去看看那个博客,绘制文字讲的是这个方法
public void drawPosText(char[] text, int index, int count,float[] pos,Paint paint)
参数说明:
text:所绘制文字的数组
index:从第几个数组小标位置开始绘制
count:绘制多少文字
paint:同上
pos:是所绘制所在位置的坐标的集合
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint = new Paint();
paint.setColor(Color.parseColor("#146ad4"));
paint.setStrokeWidth(2);
paint.setTextSize(50);
paint.setStyle(Paint.Style.STROKE);
float[] pos = new float[]{140, 200,
200, 300,
320, 400,
440, 500};
char[] text = {'北', '京', '你', '好'};
canvas.drawPosText(text, 0, 4, pos, paint);
}
实现一个轨迹或者涂鸦功能
public class All_View extends View {
private Paint mPaint;
private Path mPath;
public All_View(Context context) {
this(context, null);
}
public All_View(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public All_View(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint();
mPath = new Path();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(5);
mPaint.setTextSize(60);
mPaint.setStyle(Paint.Style.STROKE);
canvas.drawPath(mPath, mPaint);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mPath.moveTo(event.getX(), event.getY());
return true;
case MotionEvent.ACTION_MOVE:
mPath.lineTo(event.getX(), event.getY());
invalidate();
break;
case MotionEvent.ACTION_UP:
break;
}
return super.onTouchEvent(event);
}
}
参考:http://blog.csdn.net/coderinchina/article/details/51442075