Android Paint及Canvas 详解

Paint内部类

Paint.Style 画笔样式

• Paint.Style.FILL ：内部填充
• Paint.Style.STROKE ：描边
• Paint.Style.FILL_AND_STROKE ：内部填充和描边

Paint.Cap 线帽

Paint.Style.STROKE，Paint.Style.FILL_AND_STROKE下drawLine()才有效

• Paint.Cap.BUTT 无线帽
• Paint.Cap.ROUND 圆形线帽
• Paint.Cap.SQUARE 方形线帽

Paint.Join 节点

• Paint.Join.BEVEL ：直线相接
• Paint.Join.MITER ：锐角相接
• Paint.Join.ROUND ：弧相接

Paint.Align 对齐方式

• Paint.Align.LEFT ：文本被画在原点(x,y)的右边
• Paint.Align.CENTER ： 文本以原点(x,y)为中心水平绘制
• Paint.Align.RIGHT ： 文本被画在原点(x,y)的左边

图形绘制

1.矩形

• drawRect(float left, float top, float right, float bottom, Paint paint)：四点绘制。
• drawRect(Rect r, Paint paint)：根据Rect绘制。
• drawRect(RectF rect, Paint paint)：根据RectF绘制。

//onDraw（）调用非常频繁，避免在其内分配对象，须在init()中创建。
rect = new Rect();
rectF = new RectF();
//或rectF=new RectF(paddingLeft,paddingTop + 600,500,800);

 //直接四点绘制
 canvas.drawRect(paddingLeft, paddingTop + 200, 500, 400, mPaint);
        
 //Rect绘制
rect.left = paddingLeft;
rect.top = paddingTop + 400;
rect.right =500;
rect.bottom =600;
canvas.drawRect(rect, mPaint);

//Rect绘制
canvas.drawRect(rectF,mPaint);

2.椭圆

• drawOval(RectF oval, Paint paint)
• drawOval(float left, float top, float right, float bottom, Paint paint)

椭圆是根据矩形生成的，以矩形的长为椭圆的X轴，矩形的宽为椭圆的Y轴，建立的椭圆图形

 //椭圆
 rectF = new RectF(paddingLeft,1000+paddingTop,500,1200);
canvas.drawOval(rectF,mPaint);

//椭圆是根据矩形生成的，以矩形的长为椭圆的X轴，矩形的宽为椭圆的Y轴，建立的椭圆图形
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(5);
rectF = new RectF(paddingLeft,1200+paddingTop,500,1400);
canvas.drawRect(rectF,mPaint);
canvas.drawOval(rectF,mPaint);

3.圆角矩形

• drawRoundRect(RectF rect, float rx, float ry, Paint paint)
  • rect
  • rx：生成圆角的椭圆的X轴半径
  • ry：生成圆角的椭圆的Y轴半径
  • paint
• drawRoundRect(float left, float top, float right, float bottom, float rx, float ry,Paint paint)：API 21后才能使用，推荐直接使用第一个方法。

当rx为圆角矩形长的一半，ry为宽的一半时，圆角矩形就成为了椭圆

 //圆角矩形
mPaint.setStyle(Paint.Style.STROKE);
rectF = new RectF(paddingLeft,1600+paddingTop,500,1800);
canvas.drawRoundRect(rectF,20,20,mPaint);
    
//圆角矩形+椭圆
mPaint.setStyle(Paint.Style.STROKE);
rectF = new RectF(paddingLeft,1800+paddingTop,500,2000);
canvas.drawRoundRect(rectF,50,50,mPaint);
mPaint.setColor(Color.RED);
rectF = new RectF(500-100,1800+paddingTop,500,1800+paddingTop+100);  
canvas.drawOval(rectF,mPaint);//椭圆
mPaint.setColor(getResources().getColor(R.color.BrainbgColor));

4.圆形

• drawCircle(float cx, float cy, float radius, Paint paint)
  • cx：圆心点X轴坐标
  • cy：圆心点Y轴坐标
  • radius：半径
  • paint：画笔

canvas.drawCircle(paddingLeft + 250, 2300, 90, mPaint);

mPaint.setStrokeWidth(5);
mPaint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(paddingLeft + 250, 2500, 90, mPaint);

5.弧形

• drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
  • oval: 根据矩形生成椭圆
  • startAngle：弧开始的角度，以X轴正方向为0度顺时针进行绘制
  • sweepAngle：弧持续的角度范围
  • useCenter：是否连接弧中心
• drawArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle, boolean useCenter, Paint paint)
  • left：左
  • top：上
  • right：右
  • bottom：下
  • oval: 根据矩形生成椭圆
  • startAngle：弧开始的角度，以X轴正方向为0度顺时针进行绘制
  • sweepAngle：弧持续的角度范围
  • useCenter：是否连接弧中心

rectF.left = paddingLeft;
rectF.top = paddingTop + 2800;
rectF.right = 500;
rectF.bottom = 3000;
canvas.drawArc(rectF, 0, 270, true, mPaint);

mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(5);
rectF.left = paddingLeft;
rectF.top = paddingTop + 3000;
rectF.right = 500;
rectF.bottom = 3200;
canvas.drawArc(rectF, 0, 270, true, mPaint);
        
mPaint.setStyle(Paint.Style.FILL);
rectF.left = paddingLeft;
rectF.top = paddingTop + 3200;
rectF.right = 500;
rectF.bottom = 3400;
canvas.drawArc(rectF, 0, 120, false, mPaint);

mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(5);
rectF.left = paddingLeft;
rectF.top = paddingTop + 3400;
rectF.right = 500;
rectF.bottom = 3600;
canvas.drawArc(rectF, 0, 120, false, mPaint);

6.直线/多线

• drawLine(float startX, float startY, float stopX, float stopY, Paint paint)：绘制一条直线。
  • startX：开始点X坐标
  • startY：开始点Y坐标
  • stopX：结束点X坐标
  • stopY：结束点Y坐标
• drawLines(float[] pts, Paint paint)：直接绘制多条直线。
  • pts：点数组{x0,y0,x1,y1,x2,y2,x3,y3…}，每2个元素为一点，每4个元素为一条直线。
  • paint：绘制直线所使用的画笔。
• drawLines(float[] pts, int offset, int count, Paint paint)：选择性绘制多条直线。
  • pts：点数组{x0,y0,x1,y1,x2,y2,x3,y3…}，每2个元素为一点，每4个元素为一条直线
  • offset：在绘制前要跳过的数组中值的个数，这些数据将不参与绘制过程。
  • count：跳过offset指定元素后，计算剩下需要处理的元素个数。
  • paint：绘制直线所使用的画笔。

//直线
canvas.drawLine(paddingLeft + 50, paddingTop + 3900, 500, paddingTop + 3900, mPaint);
//斜直线
canvas.drawLine(paddingLeft + 50, paddingTop + 4050, 500, paddingTop + 4150, mPaint);
//多条直线｛x1,y1,x2,y2,x3,y3,……｝，每2个元素为一点，每4个元素为一条直线
float pts[] = {40, 4300, 140, 4300,
                150, 4300, 250, 4300,
                260, 4300, 360, 4300,
                370, 4300, 470, 4300};
canvas.drawLines(pts, mPaint);

float pts1[] = {40, 4500, 140, 4500,
                150, 4500, 250, 4500,
                260, 4500, 360, 4500,
                370, 4500, 470, 4500};
canvas.drawLines(pts1, 4, 12, mPaint);

7.点/多点

• drawPoint(float x, float y, Paint paint)：绘制单个点。
• drawPoints(float[] pts, Paint paint)：直接绘制多个点。
• drawPoints(float[] pts, int offset, int count, Paint paint)：选择性绘制多个点。

属性和线的差不多，可以直接参考线。

//单点
 mPaint.setStrokeWidth(15);
canvas.drawPoint(250,4900,mPaint);
//直接绘制多个点
mPaint.setStrokeWidth(15);
float pts3[] = {100, 5100,
                200, 5100,
                300, 5100,
                400, 5100,
                500, 5100};
canvas.drawPoints(pts3,mPaint);
//选择性绘制多个点
mPaint.setStrokeWidth(15);
float pts4[] = {100, 5300,
                200, 5300,
                300, 5250,
                400, 5250,
                500, 5300};
canvas.drawPoints(pts4,2,8,mPaint);

作者：Brainbg(白雨)
GitHub：https://github.com/Brainbg
博客：https://www.brainbg.com/
简书：https://www.jianshu.com/u/94518ede7100
CSDN：https://blog.csdn.net/u014720022