自定义View——drawXXX

前言

既然要自定义View，那么自然少不了各种绘制，既然要绘制，那么自然离不开Canvas和Paint，那么本篇文章就介绍一下，canvas的各种drawXXX方法和Paint一些常用方法。

Android中的坐标系

Android中的坐标系的X轴与传统的坐标系一致，但是Y轴与传统的坐标系不同，方向是相反的。

Paint常用方法

• Paint.setStyle(Style style) 设置绘制模式

• Paint.setColor(int color) 设置颜色

• Paint.setStrokeWidth(float width) 设置线条宽度

• Paint.setTextSize(float textSize) 设置文字大小

• Paint.setAntiAlias(boolean aa) 设置抗锯齿开关

  
  
  

  抗锯齿关闭与开启

• Paint.setDither(boolean dither) 设置防抖动开关

  
  
  

  防抖动未开启
  
  
  

  防抖动开启

onDraw()

以下所有操作均是在onDraw()中进行的，把绘制代码写在 onDraw() 里面，就是自定义绘制最基本的实现。

canvas.drawColor(@ColorInt int color) 颜色填充

在整个绘制区域统一涂上指定的颜色，当然你也可以传入带透明度的颜色，达到遮罩层的效果

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.YELLOW);
    }

drawColor

canvas.drawCircle 画圆

canvas.drawCircle(float centerX, float centerY, float radius, Paint paint)

• centerX，centerY：确定圆心的坐标

• radius：确定圆的半径

canvas.drawCircle(300f, 300f, 200f, mPaint);

drawCircle

补充

Paint.setColor(int color)改变画笔的颜色

mPaint.setColor(Color.BLUE);
canvas.drawCircle(200f, 400f, 100f, mPaint);

BLUE

Paint.setStyle(Paint.Style style)改变画笔的风格

Style有三种，分别是FILL, STROKE 和 FILL_AND_STROKE。

• FILL：填充模式（默认）
• STROKE：勾边模式
• FILL_AND_STROKE：两种模式一并使用，既画线又填充

mPaint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(500f, 100f, 100f, mPaint);

STROKE

Paint.setStrokeWidth(float width)设置线条宽度

mPaint.setStrokeWidth(20f);
canvas.drawCircle(500f, 500f, 100f, mPaint);

setStrokeWidth

canvas.drawRect 画矩形

画矩形有三种方法

• drawRect(RectF rect, Paint paint)
• drawRect(Rect rect, Paint paint)
• drawRect(float left, float top, float right, float bottom, Paint paint)

• left,top,right,bottom:这4个参数的意思我在下图中标记出来

这里有朋友可能就要问了，Rect和RectF有什么区别？
简单来说，最大的不同就是精度不同，一个传int类型，传float类型，至于其他的不同这里暂时先不说，也用不到。

canvas.drawRect(200f,100f,400f,300f,paint);
等价于
RectF rectF = new RectF(200f,100f,400f,300f);
canvas.drawRect(rectF,paint);

drawRect

canvas.drawPoint 画点

canvas.drawPoint(float x, float y, Paint paint)

• x,y:圆点的坐标

• 点的大小：paint.setStrokeWidth(width)

• 点的形状：paint.setStrokeCap(cap) ，ROUND圆形，SQUARE或BUTT方形（默认）。

paint.setStrokeWidth(40);

paint.setStrokeCap(Paint.Cap.ROUND);
canvas.drawPoint(100f,100f,paint);

paint.setStrokeCap(Paint.Cap.BUTT);
canvas.drawPoint(600f,300f,paint);

drawPoint

canvas.drawPoints 批量画点

批量画点有两种方法

• canvas.drawPoints(float[] pts, int offset, int count, Paint paint)
• canvas.drawPoints(float[] pts, Paint paint)

• pts:点的坐标数组

//绘制八个点（50,50）(100,50)(150,50)(200,50)
//(50,100)(100,100)(150,100)(200,100)
float[] pts = {50,50,100,50,150,50,200,50,50,100,100,100,150,100,200,100};
canvas.drawPoints(pts,paint);

drawPoints

• offset：从数组中的第几个index开始取

• count：取几个

举个例子，我们传offset为2,count为4，再传offset为1，count为4看看效果

显然这两个点的坐标为（100，50）和（150，50）

offset为2

这两个点的坐标为（50，100）和（50，150）

offset为1

canvas.drawOval 画椭圆

画椭圆有两种方法

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

canvas.drawOval(300f,300f,600f,450f,paint);

drawOval

其实我们可以理解为下图

oval.png

当然我们也可以使用Paint.setStyle(Paint.Style style)绘制出空心椭圆，这里就不演示了，参考上面的drawRect()。

canvas.drawLine 画线

canvas.drawLine(float startX, float startY, float stopX, float stopY, Paint paint)

• startX，startY：起始点的坐标

• stopX，stopY：结束点的坐标

两点确定一条直线。。。，当然我们也可以使用paint.setStrokeWidth()改变线的宽度。

canvas.drawLine(100,100,400,100,paint);
paint.setStrokeWidth(10);
canvas.drawLine(100,300,400,300,paint);

drawLine

canvas.drawLines 批量画线

批量画线有两种方法

• canvas.drawLines(float[] pts, int offset, int count, Paint paint)
• canvas.drawLines(float[] pts, Paint paint)

这里的参数与上面画点是一样的。

//（50，50）（150，50）（100，0）（100，150）（100，50）（50，150）（100，50）（150，150）
float[] pts = {50,50,150,50,100,0,100,150,100,50,50,150,100,50,150,150};
canvas.drawLines(pts,paint);

本来想画个李字的，想了想，点太多了，画个木字算了，哈哈哈，请原谅我懒。。。

drawLines

canvas.drawRoundRect 画圆角矩形

• rx,ry:圆角的横向半径和纵向半径

画圆角矩形有两种方法

• drawRoundRect(RectF rect, float rx, float ry, Paint paint)
• drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint)

 canvas.drawRoundRect(200f,300f,600f,500f,20f,20f,paint);

drawRoundRect

canvas.drawArc 绘制弧形或扇形

canvas.drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

• left,top,right,bottom：还是用来确定绘制位置的

• startAngle：起始角度

• sweepAngle：划过的角度

• useCenter：是否连接到圆心

这里首先我们要确定一个概念，0度在哪里，直接贴图

角度坐标图

RectF rectF = new RectF(300f,200f,500f,400f);

paint.setStyle(Paint.Style.FILL);//填充模式
canvas.drawArc(rectF, -110f, 100f, false, paint);//不连接圆心的填充弧形
canvas.drawArc(rectF,20f,140f,true,paint);//连接圆心的填充扇形

paint.setStyle(Paint.Style.STROKE);//钩边模式
canvas.drawArc(rectF,-160f,40f,false,paint);//不连接圆心的弧形
canvas.drawArc(rectF,170f,20f,true,paint);//连接圆心的扇形

drawArc

canvas.drawBitmap 画 Bitmap

canvas.drawBitmap(Bitmap bitmap, float left, float top, Paint paint)

canvas.drawBitmap(bitmap,20f,20f,paint);

drawBitmap

canvas.drawText 绘制文字

canvas.drawText(String text, float x, float y, Paint paint)

paint.setTextSize(20);
canvas.drawText("LXT",50f,100f,paint);

paint.setTextSize(30);
canvas.drawText("LXT",50f,200f,paint);

paint.setTextSize(40);
canvas.drawText("LXT",50f,300f,paint);

paint.setTextSize(50);
canvas.drawText("LXT",50f,400f,paint);

drawText