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);
同理,根据矩形的大小来画椭圆。
绘制三角形:
在学习如何绘制三角形之前,先学习几个方法:
参考文章:
1、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);
效果如图: