Android基础知识(9)—Android绘图基础Canvas、Paint

Android基础知识(9)—Android绘图基础

　　Android的绘图应该继承View组件，并重写它的onDraw(Canvas canvas)方法。Canvas代表“依附”与View的画布。在Canvas提供的绘制方法中还用到了个API：Path，代表任意多条直线连接而成的任意图案，当Canvas根据Path绘制时，可以绘制出任意的形状。

绘制圆形：

canvas.drawCircle (float cx, float cy, float radius, Paint paint)；

　　参数说明： cx：圆心的x坐标。cy：圆心的y坐标。radius：圆的半径。 paint：绘制时所使用的画笔。

绘制矩形/正方形：

canvas.drawRect(float left,float top,float right,float bottom,Paint paint);

　　参数说明：left：矩形的左边位置。top：矩形的上边位置。right：矩形的右边位置。bottom：矩形的下边位置。

绘制圆角矩形：

  RectF re1 = new RectF(float left,float top,float right,float bottom); //先画矩形  canvas.drawRoundRect(RectF rect, float cx, float cy,Paint paint);  

　　其实跟矩形的坐标是一样的，这些坐标定义了一个矩形，然后只是在这个矩形中画了一个圆角而已。

绘制椭圆：

  RectF re1 = new RectF(float left,float top,float right,float bottom); //先画矩形  canvas.drawRoundRect(RectF rect,Paint paint);  

　　同理，根据矩形的大小来画椭圆。

绘制三角形：

　　在学习如何绘制三角形之前，先学习几个方法：

　　参考文章：https://segmentfault.com/a/1190000000721127

１、moveTo(float x, float y)：不会进行绘制，只用于移动移动画笔（就像下笔的地方），结合以下方法进行使用。、

Path path1 = new Path();path1.moveTo(100, 100);

2、lineTo(float x, float y)：用于进行直线绘制。

Path path1 = new Path();path1.lineTo(300, 300);canvas.drawPath(path1, paint);

　　如果lineTo没有结合moveTo使用，也就是lineTo默认从坐标(0,0)开始绘制。如图：

　　那么结合moveTo了的绘制是怎么样的呢？

Path path1 = new Path();path1.moveTo(100, 100);path1.lineTo(300, 300);canvas.drawPath(path1, paint);

　　把画笔移动(100,100)处开始绘制，效果如图：

3、quadTo(float x1, float y1, float x2, float y2)：用于绘制圆滑曲线，即贝塞尔曲线。

　　(x1,y1) 为控制点，(x2,y2)为结束点。

　　贝塞尔曲线的形成，就比如我们把一条橡皮筋拉直，橡皮筋的头尾部对应起点和终点，然后从拉直的橡皮筋中选择任意一点（除头尾对应的点外）扯动橡皮筋形成的弯曲形状，而那个扯动橡皮筋的点就是控制点；

　　同样地，我们还是得需要moveTo来协助控制。

<pre name="code" class="java">        Path path3 = new Path();        path3.moveTo(10, 900);        path3.quadTo(100, 750, 200, 850);        canvas.drawPath(path3, paint);

　　下就面以一个Demo来结合理解函数的应用，代码如下：

       canvas.drawColor(Color.WHITE);          // 把整张画布绘制成白色        Paint paint = new Paint();              //画笔        paint.setAntiAlias(true);               // 去锯齿        paint.setColor(Color.BLUE);             //设置画笔颜色        paint.setStyle(Paint.Style.STROKE);     //空心效果        paint.setStrokeWidth(4);               //线宽        int viewWidth = this.getWidth();        // 绘制圆形cx cy radius paint        canvas.drawCircle(viewWidth / 10 + 10, viewWidth / 10 + 10, viewWidth / 10, paint);        // 绘制正方形        canvas.drawRect(10, viewWidth / 5 + 20, viewWidth / 5 + 10, viewWidth * 2 / 5 + 20, paint);        // 绘制矩形        canvas.drawRect(10, viewWidth * 2 / 5 + 30, viewWidth / 5 + 10, viewWidth / 2 + 30, paint);        // 绘制圆角矩形        RectF re1 = new RectF(10, viewWidth / 2 + 40, 10 + viewWidth / 5, viewWidth * 3 / 5 + 40);//先画矩形 再画圆角        canvas.drawRoundRect(re1, 15, 15, paint);        // 绘制椭圆        RectF re11 = new RectF(10, viewWidth * 3 / 5 + 50, 10 + viewWidth / 5, viewWidth * 7 / 10 + 50);        canvas.drawOval(re11, paint);        // 定义一个Path对象，封闭成一个三角形        Path path1 = new Path();        path1.moveTo(10, viewWidth * 9 / 10 + 60);        path1.lineTo(viewWidth / 5 + 10, viewWidth * 9 / 10 + 60);        path1.lineTo(viewWidth / 10 + 10, viewWidth * 7 / 10 + 60);        path1.close();        // 根据Path进行绘制，绘制三角形        canvas.drawPath(path1, paint);        // 定义一个Path对象，封闭成一个五角形        Path path2 = new Path();        path2.moveTo(10 + viewWidth / 15, viewWidth * 9 / 10 + 70);        path2.lineTo(10 + viewWidth * 2 / 15, viewWidth * 9 / 10 + 70);        path2.lineTo(10 + viewWidth / 5, viewWidth + 70);        path2.lineTo(10 + viewWidth / 10, viewWidth * 11 / 10 + 70);        path2.lineTo(10, viewWidth + 70);        path2.close();        // 根据Path进行绘制，绘制五角形        canvas.drawPath(path2, paint);        Path path3 = new Path();        path3.moveTo(10, 900);        path3.quadTo(100, 750, 200, 850);        canvas.drawPath(path3, paint);

　　效果如图：

相关demo代码下载：http://download.csdn.net/detail/qq_26849491/9602041