Android学习教程之2D绘图基础及绘制太极图
前言
android是通过graphics类来显示2d图形的。其中graphics中包括了canvas、paint、color、bitmap等类。graphics具有绘制点、线、颜色、2d几何图形、图像处理等功能。其中color和bitmap是很常用的类，本文主要要讲的是canvas和paint。顾名思义就是画布和画笔。
canvas类
canvas即画布，我们需要做的就是使用之前设置好的paint来绘制图形。系统通过 canvas 为我们提供了一些基础的绘图 api ：
1、canvas.drawpoint(float x, float y, @nonnull paint paint);
作用：绘制点。
参数：绘制点的 x 坐标，y 坐标，画笔参数
2、canvas.drawline(float startx, float starty, float stopx, float stopy, @nonnull paint paint);
作用：绘制线。
参数：起点的 x 坐标，起点 y 坐标，终点 x 坐标，终点 y 坐标，画笔
3、canvas.drawrect(@nonnull rectf rect, @nonnull paint paint);
作用：绘制矩形。
参数：矩形参数，画笔参数
矩形参数构造方法：如下代码，分别为矩形的上下左右的坐标
public rectf(float left, float top, float right, float bottom) {}
4、canvas.drawvertices();
作用：绘制多边形。
参数：
5、canvas.drawarc(float left, float top, float right, float bottom, float startangle, float sweepangle, boolean usecenter, @nonnull paint paint);
作用：绘制弧线。
参数：左端，上端，右端，底部，开始的角度，扫过的角度，圆弧的两段是否与圆心连线，画笔参数
6、canvas.drawcircle(float cx, float cy, float radius, @nonnull paint paint);
作用：绘制圆。
参数：圆心 x 坐标，圆心 y 坐标，半径，画笔参数
7、canvas.drawtext();
作用：绘制文字
参数：文字左下角 x 坐标，文字左下角 y 坐标，
8、canvas.drawoval(float left, float top, float right, float bottom, @nonnull paint paint);
作用：绘制椭圆
参数：左端，上端，右端，下端，画笔参数
9、canvas.drawroundrect(float left, float top, float right, float bottom, float rx, float ry,@nonnull paint paint);
作用：绘制圆角矩形
参数：左端，上端，右端，下端，x轴上的圆角半径，y 轴上的圆角半径，画笔参数
系统画笔工具所提供的 api ：
1、mpaint.setantialias();
设置反锯齿
参数：true，false
2、mpaint.setcolor();
设置画笔颜色
参数：颜色值
3、mpaint.setargb();
设置画笔的 a,r,g,b
参数：a,r,g,b
4、mpaint.setalpha();
设置画笔的透明度
参数：取值范围在 0 - 255 之间
5、mpaint.settextsize();
设置画笔文字的大小
参数：必须大于 0
6、mpaint.setstyle();
设置画笔的风格（填充和描边）
参数：paint.style.fill(填充)，paint.style.stroke(描边)，paint.style.fill_and_stroke(填充和描边)
7、mpaint.setstrokewidth();
设置画笔描边时的宽度
参数：浮点型
paint类
和日常绘图一样，要绘制图形，首先得选择合适的画笔。那么同理android中绘图首先得调整画笔，按照自己的需要设置画笔的相关属性，系统给我提供的常用api如下：
- setcolor(); //设置画笔的颜色
- setantialias(); //设置画笔的锯齿效果
- setargb(); //设置画笔的a、r、g、b值
- setalpha(); //设置画笔的alpha值
- settextsize(); //设置字体的尺寸
- setstyle(); //设置画笔的风格（空心或实心）
- setstrokewidth(); //设置空心边框的宽度
- getcolor(); //获取画笔的颜色
接下来我将通过绘制太极图来学习android绘图机制。
先看看太极图：
现在就要开始一步一步的将他画出来， 我们可以借鉴图层的概念。首先绘制最底部的图层，为了方便我们将其左，右两边分别设置白色和黑色：
图中（x，y）是圆心坐标。这里我设置的x=getwidth() / 2；y=getheight() / 2；半径r=getheight() / 2；
现在我们就来看看代码，在定义view的ondraw（canvas canvas）方法中：
//绘制最外层大圆 mpaint.setcolor(color.black);//设置画笔颜色为黑色 mpaint.setstyle(paint.style.fill_and_stroke);//设置画笔style实心 rectf rect= new rectf(getwidth() / 2 - getheight() / 2, 0, getwidth() / 2 + getheight() / 2, getheight());//圆弧的外接矩形 canvas.drawarc(rect, 270, 180, false, mpaint); mpaint.setcolor(color.white);//设置画笔颜色为白色 canvas.drawarc(rect, 90, 180, false, mpaint);
代码中rect即圆的外接四边形，其构造函数rectf(float left, float top, float right, float bottom)的四个参数分别对应四边形最左边的x坐标值；左上边的y坐标值；最右边的x坐标值；最下边的y坐标值。可以看出代码中：
left=getwidth() / 2 - getheight() / 2； top=0； right=getwidth() / 2 + getheight() / 2； bottom=getheight()；
四个值确定了圆的外接四边形。
canvas.drawarc(rect, 90, 180, false, mpaint);第一个参数即是我们上边确定的区域，第二个参数是开始绘制的角度（90度，ｘ轴方向顺时针旋转），第三个参数扫描的度数，第四个参数设置好的画笔paint。
接下来我们要着手绘制中间图层，中间图层可以看做是两个上下外切的半圆，上边白色右半圆，下边黑色左半圆：
同理，我们应该也是先确定外接四边形的区域，然后在画圆弧这里就不再详述。
//绘制中间层上边圆 mpaint.setcolor(color.black); rect= new rectf(getwidth()/2-getheight()/4,0,getwidth() / 2 + getheight() / 4, getheight() /2); canvas.drawarc(rect, 90, 180, false, mpaint); //绘制中间层下边圆 mpaint.setcolor(color.white); rect= new rectf(getwidth()/2-getheight() / 4, getheight() / 2, getwidth() / 2 + getheight() / 4, getheight()); canvas.drawarc(rect, 270, 180, false, mpaint);
最后，最上边图层上下两个小圆
//绘制最上层白色小圆 mpaint.setcolor(color.white); canvas.drawcircle(getwidth() / 2, getheight() / 4, getheight() / 10, mpaint); //绘制最上层黑色小圆 mpaint.setcolor(color.black); mpaint.setstyle(paint.style.fill); canvas.drawcircle(getwidth() / 2, getheight() * 3 / 4, getheight() / 10, mpaint);
canvas.drawcircle是用来画圆的，第一个参数是圆心x坐标值，第二个参数是y坐标值，第三个坐标是圆的半径，第四个是设置的画笔。
到此就画出了一个太极图。
附上自定义view的代码 ：
package com.chuck.mobile.changecountview.widget;
import android.content.context;
import android.graphics.canvas;
import android.graphics.color;
import android.graphics.paint;
import android.graphics.path;
import android.graphics.rectf;
import android.util.attributeset;
import android.view.view;
/**
* 项目名称：changecountview
* 类描述：
* 创建人：administrator
* 创建时间：2015/12/11 16:37
* 修改人：administrator
* 修改时间：2015/12/11 16:37
* 修改备注：
*/
public class customeview extends view{
private paint mpaint=new paint();
private path path=new path();
private float degress=90;
public customeview(context context) {
super(context);
}
public customeview(context context, attributeset attrs) {
super(context, attrs);
}
public customeview(context context, attributeset attrs, int defstyleattr) {
super(context, attrs, defstyleattr);
}
@override
protected void ondraw(canvas canvas) {
//绘制最外层大圆
mpaint.setcolor(color.black);//设置画笔颜色为黑色
mpaint.setstyle(paint.style.fill_and_stroke);//设置画笔style实心
rectf rect= new rectf(getwidth() / 2 - getheight() / 2,
0, getwidth() / 2 + getheight() / 2, getheight());//圆弧的外接矩形
canvas.drawarc(rect, 270, 180, false, mpaint);
mpaint.setcolor(color.white);//设置画笔颜色为白色
canvas.drawarc(rect, 90, 180, false, mpaint);
//绘制中间层上边圆
mpaint.setcolor(color.black);
rect= new rectf(getwidth()/2-getheight()/4,0,getwidth() / 2 + getheight() / 4, getheight() /2);
canvas.drawarc(rect, 90, 180, false, mpaint);
//绘制中间层下边圆
mpaint.setcolor(color.white);
rect= new rectf(getwidth()/2-getheight() / 4, getheight() / 2, getwidth() / 2 + getheight() / 4, getheight());
canvas.drawarc(rect, 270, 180, false, mpaint);
//绘制最上层白色小圆
mpaint.setcolor(color.white);
canvas.drawcircle(getwidth() / 2, getheight() / 4, getheight() / 10, mpaint);
//绘制最上层黑色小圆
mpaint.setcolor(color.black);
mpaint.setstyle(paint.style.fill);
canvas.drawcircle(getwidth() / 2, getheight() * 3 / 4, getheight() / 10, mpaint);
}
}
然后在布局文件中使用自定义view
<com.chuck.mobile.changecountview.widget.customeview android:layout_width="match_parent" android:layout_height="250dp" android:background="@color/gray"/>
总结
以上就是这篇文章的全部内容了，希望本文的内容对各位android开发者们能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。
下一篇： Android 开发隐藏标题栏的方法总结