Android 自定义控件之基础几何图形绘制详解

转载请标明出处: http://blog.csdn.net/airsaid/article/details/52562488
本文出自:周游的博客

前言

距离写上一篇自定义View文章已经大半年过去了,一直想继续写,但是无奈技术有限,生怕误人子弟。这段时间项目刚刚完成,有点时间,跟着大神的脚步,巩固下自定义View的相关基础知识。

Canvas&Paint

Canvas和Paint可以理解为现实中的画布和画笔,这两样是绘图必备,首先来详细的了解下这两个。

Paint常用函数

首先来看下Paint的常用函数:
* setColor(int color):设置画笔颜色。
* setStrokeWidth(float width):设置画笔宽度。
* setAntiAlias(boolean aa):设置抗锯齿。
* setStyle(Style style): 设置填充样式。
* setShadowLayer(float radius, float dx, float dy, int shadowColor):设置阴影。

设置画笔颜色和画笔宽度没什么可说的,设置抗锯齿可以让我们绘制的图形更加圆滑,除了Paint的setAntiAlias()函数可以设置抗锯齿外,也可以通过Canvas设置:

canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG)); 

setStyle()

setStyle()函数可以设置如下参数:
* Paint.Style.STROKE:描边。
* Paint.Style.FILL:填充内部。
* Paint.Style.FILL_AND_STROKE:填充内部和描边。
新建个项目,在onDraw函数中分别绘制下,看下都有什么区别:

protected void onDraw(Canvas canvas) {
    mPaint.setColor(Color.BLUE);
    mPaint.setStyle(Paint.Style.STROKE);
    canvas.drawCircle(mLeftX, mLeftY, 100, mPaint);

    mPaint.setColor(Color.RED);
    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(mLeftX * 4, mLeftY, 100, mPaint);

    mPaint.setColor(Color.BLACK);
    mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    canvas.drawCircle(mLeftX * 7, mLeftY, 100, mPaint);
}

运行结果:
这里写图片描述

通过运行结果可以看到,貌似Paint.Style.FILL和Paint.Style.FILL_AND_STROKE其实并没有什么区别。
但是,如果把画笔的宽度调宽一些:

mPaint.setStrokeWidth(50);

mPaint.setColor(Color.RED);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawCircle(mLeftX, mLeftY, 50, mPaint);

mPaint.setColor(Color.BLACK);
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawCircle(mLeftX * 4, mLeftY, 50, mPaint);

运行结果:
这里写图片描述

可以看出看来,FILL_AND_STROKE其实会把宽度一起填充。

setShadowLayer()

setShadowLayer(float radius, float dx, float dy, int shadowColor):
* radius:阴影倾斜度。
* dx:水平位移。
* dy:垂直位移。
* shadowColor:阴影颜色。
给文字绘制上阴影:

mPaint.setTextSize(50);
mPaint.setColor(Color.BLUE);
mPaint.setShadowLayer(5, 10, 10, Color.GREEN);
canvas.drawText("Airsaid", mLeftX, mLeftY, mPaint);

运行结果:
这里写图片描述

Canvas常用函数

Canvas作为画布,含有绘制各种图形的函数,下面根据具体图形来分类进行详细讲解。

绘制背景

  • drawColor(int):绘制画布背景。
  • drawRGB(int r, int g, int b):同上。
  • drawARGB(int a, int r, int g, int b):同上,四个参数取值范围0~255。

绘制一条直线

  • drawLine(float startX, float startY,float stopX,float stopY,Paint paint):
    • startX:开始x坐标。
    • startY:开始Y坐标。
    • stopX:结束x坐标。
    • stopY:结束Y坐标。
    • paint:绘制直线所用画笔。
      代码实例:
mPaint.setColor(Color.BLUE);
mPaint.setStrokeWidth(10);
canvas.drawLine(0, 0, getWidth(), 0, mPaint);

运行结果:
这里写图片描述

绘制多条直线

  • drawLines(float[] pts, Paint paint):一般绘制多条直线。
    • pts:坐标点数据的集合,每4个为一组绘制一条直线。
    • paint:绘制直线所用画笔。
      代码实例:
mPaint.setColor(Color.BLUE);
mPaint.setStrokeWidth(10);
float pts[] = {0, 10, getWidth(), 10, 0, 50, getWidth(), 50};
canvas.drawLines(pts, mPaint);

运行结果:
这里写图片描述

  • drawLines(float[] pts, int offset, int count, Paint paint):有选择的绘制多条直线。
    • pts:坐标点数据的集合,每4个为一组绘制一条直线。
    • offset:跳过的数据个数,跳过的数据将不参与绘制过程。
    • conunt:实际参与绘制的数据个数。
    • paint:绘制直线所用画笔。
      代码示例,跳过一条线的绘制:
mPaint.setColor(Color.BLUE);
mPaint.setStrokeWidth(10);
float pts[] = {0, 10, getWidth(), 10, 0, 50, getWidth(), 50};
canvas.drawLines(pts, 4, 4, mPaint);

运行结果:
这里写图片描述

绘制单点

  • drawPoint(float x, float y,Paint paint):绘制一个点。
    • x:点的x坐标。
    • y:点的y坐标。
    • paint:绘制点所用画笔。
      代码示例:
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(20);
canvas.drawPoint(100, 100, mPaint);

运行结果:
这里写图片描述

绘制多点

  • drawPoints(float[] pts, Paint paint):绘制多个点。
    • pts:坐标点的数据集合,每两个为一组绘制一个点。
      代码示例(绘制三个点):
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(20);
float pts[] = {100, 100, 200, 100, 300, 100};
canvas.drawPoints(pts, mPaint);

运行结果:
这里写图片描述

  • drawPoints(float[] pts, int offset, int count, Paint paint): 有选择的绘制多个点。
    • pts:参数同上,其他参数同绘制多条线一样。
      代码示例(跳过第1个点,只绘制2个点):
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(20);
float pts[] = {100, 100, 200, 100, 300, 100};
canvas.drawPoints(pts, 2, 4, mPaint);

运行结果:

这里写图片描述

绘制矩形

  • drawRect(Rect r, Paint paint):根据传入的Rect绘制矩形。
  • drawRect(RectF rect, Paint paint):根据传入的RectF绘制矩形。
  • drawRect(float left, float top, float rigth, float bottom, Paint paint):直接传入矩形的四个点来绘制矩形。
    代码示例(分别使用以上函数绘制三个矩形):
mPaint.setColor(Color.RED);

Rect rect = new Rect(100, 30, 200, 100);
canvas.drawRect(rect, mPaint);

RectF rectF = new RectF(300, 30, 400, 100);
canvas.drawRect(rectF, mPaint);

canvas.drawRect(500, 30, 600, 100, mPaint);

其中Rect和RectF为矩形辅助类,可根据4个点构建一片矩形区域,用于帮助我们对矩形进行操作。

运行结果:
这里写图片描述

绘制圆角矩形

  • drawRoundRect(RectF rect, float rx, float ry, Paint paint): 根据传入的RectF绘制圆角矩形。
    • rect:要绘制的矩形。
    • rx:x轴圆角椭圆半径。
    • ry:y轴圆角椭圆半径。
  • drawRoundRect(float left, float top, float rigth, float bottom, float rx, float ry, Paint paint):直接传入矩形的四个点来绘制圆角矩形,从API21开始提供。
    参数同上。
    代码实例(根据以上函数分别绘制圆角矩形):
mPaint.setColor(Color.RED);
RectF rectF = new RectF(0, 0, 300, 100);
canvas.drawRoundRect(rectF, 30f, 30f, mPaint);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    canvas.drawRoundRect(400f, 0f, 700f, 100f, 30f, 30f, mPaint);
}

其中,由于直接传入矩形的四个点来绘制圆角矩形的函数是在API21才开始提供,所以进行了判断。
运行结果:
这里写图片描述

绘制圆形

  • drawCircle(float cx,float cy,float radius,Paint paint):
    • cx:圆心点x轴坐标。
    • cy:圆心点y轴坐标。
    • radius:圆的半径。
    • paint:绘制圆形所用画笔。
      代码示例:
mPaint.setColor(Color.RED);
canvas.drawCircle(100f, 50f, 50f, mPaint);

运行结果:
这里写图片描述

绘制椭圆

  • drawOval(RectF oval, Paint paint):根据矩形对象绘制椭圆。
    • oval:矩形对象。椭圆根据该矩形对象生成,以矩形的长作为椭圆的x轴,宽为y轴。
  • drawOval(float left, float top, float rigth, float bottom, Paint paint):直接传入矩形的四个点来绘制椭圆,从API21开始提供。
    参数同上。
    代码示例:
mPaint.setColor(Color.RED);
RectF rectF = new RectF(50, 0, 200, 100);
canvas.drawOval(rectF, mPaint);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    canvas.drawOval(300, 0, 450, 100, mPaint);
}

运行结果:
这里写图片描述

绘制弧形

  • drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint):
    • oval:矩形对象。
    • startAngle:弧形开始的角度。
    • sweepAngle:弧形持续的角度。
    • useCenter:是否有弧形的两边。
    • paint:绘制弧形的画笔。
  • drawArc(float left, float top, float rigth, float bottom,float startAngle, float sweepAngle, boolean useCenter, Paint paint):
    参数同上。
    代码实例:
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(5);
mPaint.setStyle(Paint.Style.STROKE);
RectF rectF = new RectF(50, 0, 200, 100);
canvas.drawArc(rectF, 0f, 180f, false, mPaint);

RectF rectF2 = new RectF(250, 0, 400, 100);
canvas.drawArc(rectF2, 0f, 180f, true, mPaint);

RectF rectF3 = new RectF(450, 0, 600, 100);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawArc(rectF3, 0f, 180f, true, mPaint);

运行结果:
这里写图片描述

参考链接

发布了55 篇原创文章 · 获赞 117 · 访问量 30万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览