Android绘图技术详解，带你轻松绘出各种图形

傷城~ 2022-08-23 00:30 177阅读 0赞

转载地址：http://blog.csdn.net/leejizhou/article/details/51524948\#rd

【[Android][] 2D绘图解析】系列文章将全面介绍Android绘图相关，这篇简单介绍下如何利用Android API进行一些简单图形的绘制，绘图的前提是需要继承自View，然后重写它的onDraw(Canvas canvas) 方法即可。

首先我们新建一个类继承自View，并重写onDraw方法。

然后在Layout中进行添加此View

这样一个大体的自定义View的流程就搭建起来了，当然现在运行会显示一片空白，因为我们还没在onDraw方法进行任何的绘制，进行绘制前需要了解两个API，Canvas和Paint。

Canvas翻译成中文就是画布的意思，Canvas负责进行绘制各种各样的图形，它有如下的一些绘制图形方法

*  drawArc 绘制弧
 *  drawBitmap 绘制位图
 *  drawCircle 绘制圆形
 *  drawLine 绘制线
 *  drawOval 绘制椭圆
 *  drawPath 绘制路径
 *  drawPoint 绘制一个点
 *  drawPoints 绘制多个点
 *  drawRect 绘制矩形
 *  drawRoundRect 绘制圆角矩形
 *  drawText 绘制字符串
 *  drawTextOnPath 沿着路径绘制字符串

…更多的绘制方法参考 [https://developer.android.com/reference/android/graphics/Canvas.html][https_developer.android.com_reference_android_graphics_Canvas.html] （需要科学上网）

Paint翻译成中文有油漆涂料的意思，Paint主要负责设置绘图的风格，包括画笔的颜色，粗细，填充风格等，它有如下的一些设置方法。

*  setARGB/setColor 设置颜色
 *  setAlpha 设置透明度
 *  setAntiAlias 设置是否抗锯齿
 *  setShader 设置画笔的填充效果
 *  setShadowLayer 设置阴影
 *  setStyle 设置画笔风格
 *  setStrokeWidth 设置空心边框的宽度
 *  setTextSize 设置绘制文本时文字的大小

…更多的设置方法参考 [https://developer.android.com/reference/android/graphics/Paint.html][https_developer.android.com_reference_android_graphics_Paint.html]（需要科学上网）

我们利用上面的API进行一些简单的绘图

绘制圆形：drawCircle(float cx, float cy, float radius, Paint paint)

cx>圆心的x坐标   
cy>圆心的y坐标   
radius>圆的半径   
paint>绘制风格

运行效果：

![这里写图片描述][20160528173959957]

绘制矩形：drawRect(float left, float top, float right, float bottom, Paint paint) / drawRect(RectF rect, Paint paint)

left>矩形left的x坐标   
top>矩形top的y坐标   
right>矩形right的x坐标   
bottom>矩形bottom的y坐标   
paint>绘制风格

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 Paint paint = new Paint();
 //去锯齿
 paint.setAntiAlias(true);
 //设置颜色
 paint.setColor(getResources().getColor(android.R.color.holo_blue_light));
 //绘制正方形
 canvas.drawRect(100, 100, 300, 300, paint);
 //上面代码等同于
 //RectF rel=new RectF(100,100,300,300);
 //canvas.drawRect(rel, paint);
 
 //设置空心Style
 paint.setStyle(Paint.Style.STROKE);
 //设置空心边框的宽度
 paint.setStrokeWidth(20);
 //绘制空心矩形
 canvas.drawRect(100, 400, 600, 800, paint);
 }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul>

运行效果：

![这里写图片描述][20160528174030426]

绘制圆角矩形：drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) / drawRoundRect(RectF rect, float rx, float ry, Paint paint)

left>图形left的x坐标   
top>图形top的y坐标   
right>图形right的x坐标   
bottom>图形bottom的y坐标   
rx>x方向的圆角半径   
ry>y方向的圆角半径   
paint>绘制风格

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 Paint paint = new Paint();
 //去锯齿
 paint.setAntiAlias(true);
 //设置颜色
 paint.setColor(getResources().getColor(android.R.color.holo_blue_light));
 //绘制圆角矩形
 canvas.drawRoundRect(100, 100, 300, 300, 30, 30, paint);
 //上面代码等同于
 //RectF rel=new RectF(100,100,300,300);
 //canvas.drawRoundRect(rel,30,30,paint);
 //设置空心Style
 paint.setStyle(Paint.Style.STROKE);
 //设置空心边框的宽度
 paint.setStrokeWidth(20);
 //绘制空心圆角矩形
 canvas.drawRoundRect(100, 400, 600, 800, 30, 30, paint);
 
 }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul>

运行效果

![这里写图片描述][20160528174110098]

绘制椭圆：drawOval(float left, float top, float right, float bottom, Paint paint)

left>图形left的x坐标   
top>图形top的y坐标   
right>图形right的x坐标   
bottom>图形bottom的y坐标   
paint>绘制风格

运行效果：

![这里写图片描述][20160528174201889]

绘制弧：drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

oval>指定圆弧的外轮廓矩形区域   
startAngle>圆弧起始角度，单位为度   
sweepAngle>圆弧扫过的角度，顺时针方向，单位为度   
useCenter>如果为True时，在绘制圆弧时将圆心包括在内，通常用来绘制扇形   
paint>绘制风格

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 Paint paint = new Paint();
 //去锯齿
 paint.setAntiAlias(true);
 //设置颜色
 paint.setColor(getResources().getColor(android.R.color.holo_orange_dark));
 RectF rel = new RectF(100, 100, 300, 300);
 //实心圆弧
 canvas.drawArc(rel, 0, 270, false, paint);
 //实心圆弧 将圆心包含在内
 RectF rel2 = new RectF(100, 400, 300, 600);
 canvas.drawArc(rel2, 0, 270, true, paint);
 //设置空心Style
 paint.setStyle(Paint.Style.STROKE);
 paint.setStrokeWidth(20);
 
 RectF rel3 = new RectF(100, 700, 300, 900);
 canvas.drawArc(rel3, 0, 270, false, paint);
 
 RectF rel4 = new RectF(100, 1000, 300, 1200);
 canvas.drawArc(rel4, 0, 270, true, paint);
 
 }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li></ul>

运行效果

![这里写图片描述][20160528174325015]

绘制文字：drawText(String text, float x, float y, Paint paint)

text>文本   
x>文本origin的x坐标   
y>文本baseline的y坐标   
paint>绘制风格

\*origin和baseline示意图   
![这里写图片描述][20160528172404826]

运行效果：

![这里写图片描述][20160528174501251]

OK，Android绘图系列的第一篇关于Canvas和Paint就简单介绍到这，Canvas更多种类的绘图效果可以参考官方文档并动手实践效果。

[Android]: http://lib.csdn.net/base/15
[https_developer.android.com_reference_android_graphics_Canvas.html]: https://developer.android.com/reference/android/graphics/Canvas.html
[https_developer.android.com_reference_android_graphics_Paint.html]: https://developer.android.com/reference/android/graphics/Paint.html
[20160528173959957]: /images/20220722/35955cb136634f11b4a74f8b130cc121.png
[20160528174030426]: /images/20220722/c3ae4b212d264a8da3537652bc13f2a2.png
[20160528174110098]: /images/20220722/3655bea2f6044a068830e38e91e746a9.png
[20160528174201889]: /images/20220722/f8b3dd4524574959bd0d438cc63fb55f.png
[20160528174325015]: /images/20220722/04c624e8f56540318ea6d17b1c0a5bab.png
[20160528172404826]: /images/20220722/84ab7553fdc4494a9468c0c0858d8164.png
[20160528174501251]: /images/20220722/c3728b4d865f4279b309637e2af39d2b.png