原创 2017-08-14 认真的 小苏
参考：（http://hencoder.com/ui-1-1/）
学而不思则罔，思而不学则殆
练习1
练习2
练习3
练习4
Canvas 所有的简单图形的绘制
paint(画笔的基础属性)
paint.setColor(Color.BLACK); //画笔的颜色
paint.setStyle(Paint.Style.FILL);//STROKE 画线模式、FILL填充模式(默认为填充模式)、FILL_AND_STROKE（即画线又填充）
paint.setStrokeWidth(20);// 画笔的宽度
paint.setAntiAlias(true); // 设置开启 或 关闭 抗锯齿(图形会出现毛边现象)
画圆
canvas.drawCircle(100, 100, 100, paint);//float cx, float cy ：控制圆心的坐标。float radius ：控制圆的半径
画矩形
canvas.drawRect(0, 0, 200, 200, paint);//float left, float top : 控制矩形的位置坐标。float right, float bottom ：控制矩形的宽和高
@SuppressLint("DrawAllocation") Rect rect = new Rect(10, 10, 200, 200); //矩形其他的重载方法
@SuppressLint("DrawAllocation") RectF rectF = new RectF(0, 0, 200, 200);
canvas.drawRect(rect, paint);
颜色填充
canvas.drawColor(Color.BLACK);
//这类颜色填充方法一般用于在绘制之前设置底色，或者在绘制之后为界面设置半透明蒙版。
canvas.drawRGB(100, 200, 100);
canvas.drawARGB(100, 100, 200, 100);
画单个点
/**
* Paint.setStrokeCap(cap) 可以设置点的形状，
* 但这个方法并不是专门用来设置点的形状的，而是一个设置线条端点形状的方法。
* 端点有圆头 (ROUND)、平头 (BUTT) 和方头 (SQUARE) 三种，具体会在下一节里面讲。
*/
paint.setStrokeCap(Paint.Cap.ROUND); // 圆头
paint.setStrokeCap(Paint.Cap.BUTT); // 平头
paint.setStrokeCap(Paint.Cap.SQUARE);// 方头
//注意:设置 paint.setStyle(Paint.Style.STROKE); 画线模式是无效的
canvas.drawPoint(50, 50, paint);
画批量的点
paint.setStrokeCap(Paint.Cap.BUTT); // 平头
float[] points = {0, 0, 50, 50, 50, 100, 100, 50, 100, 100, 150, 50, 150, 100};
/**
* float[] pts : 这个数组是点的坐标，每两个成一对
* int offset ：表示跳过数组的前几个数再开始记坐标
* int count ：表示一共要绘制几个点
*/
// 绘制四个点：(50, 50) (50, 100) (100, 50) (100, 100)
canvas.drawPoints(points, 2/* 跳过两个数，即前两个 0 */, 5/*一共绘制四个点*/, paint);
画椭圆
/**
* 注意 若right == bottom 画出来的就是个圆形
*/
canvas.drawOval(50, 50, 350, 350, paint);//left, top, right, bottom 是这个椭圆的左、上、右、下四个边界点的坐标
RectF rectF = new RectF(50, 50, 350, 200);
canvas.drawOval(rectF, paint);
画线
/**
* float startX, float startY: 起始坐标
* float stopX, float stopY : 终止坐标
* 由于直线不是封闭图形，所以 paint.setStyle(style) 对直线没有影响。
*/
canvas.drawLine(200, 200, 800, 500, paint);
批量画线
float lines[] = {20, 20, 120, 20, 70, 20, 70, 120, 20, 70, 120, 70, 20, 120, 120, 120};
canvas.drawLines(lines, paint);
画圆角矩形
/**
* left, top, right, bottom 是四条边的坐标
* rx 和 ry 是圆角的横向半径和纵向半径 也就是圆角的角度
*/
canvas.drawRoundRect(100, 100, 500, 300, 20, 20, paint);
绘制弧形或扇形
/**
* drawArc() 是使用一个椭圆来描述弧形的。
* left, top, right, bottom 描述的是这个弧形所在的椭圆；
* startAngle 是弧形的起始角度（x 轴的正向，即正右的方向，是 0 度的位置；顺时针为正角度，逆时针为负角度），
* sweepAngle 是弧形划过的角度；
* useCenter 表示是否连接到圆心，如果不连接到圆心，就是弧形，如果连接到圆心，就是扇形。
*/
canvas.drawArc(200, 100, 800, 500, -110, 100, true, paint);//扇形
canvas.drawArc(200, 100, 800, 500, 20, 140, false, paint);//弧形
paint.setStyle(Paint.Style.STROKE); //画线模式
paint.setStrokeWidth(10);// 画笔的宽度
canvas.drawArc(200, 100, 800, 500, 180, 60, false, paint);//绘制不封口的弧形
画自定义图形 - Path
// 添加一个圆
/**
* x, y, radius 这三个参数是圆的基本信息，最后一个参数 dir 是画圆的路径的方向。
* 路径方向有两种：顺时针 (CW clockwise) 和逆时针 (CCW counter-clockwise)。
* 对于普通情况，这个参数填 CW 还是填 CCW 没有影响。
*/
// path.addCircle(300, 300, 200, Path.Direction.CW);
// 添加一个椭圆
// path.addOval(50, 30, 150, 350, Path.Direction.CW);
// 添加一个矩形
// path.addRect(50, 50, 300, 300, Path.Direction.CW);
// 添加一个圆角矩形
// path.addRoundRect(50, 50, 300, 400, 10, 10, Path.Direction.CW);
// 添加另一个path
// path2.addRect(20, 20, 200, 300, Path.Direction.CW);
// path.addPath(path2);
// 画直线
// path.lineTo(200, 200); // lineTo (x,y) 参数x,y 表示绝对坐标 : 由当前位置(0,0) - (100,100)
// path.rLineTo(0, 100); // rLinto(x,y) 参数x,y表示相对坐标 ： 由上一个当前位置(100,100) 向正下方画一条100 像素的直线
// path.rLineTo(100, 0);// rLinto(x,y) 参数x,y表示相对坐标 ： 由上一个当前位置(100,200) 向正下方画一条100 像素的直线
// 画二次贝塞尔曲线
// path.quadTo(0, 100, 500, 200); //x1, y1 和 x2, y2 则分别是控制点和终点的坐标
// path.rQuadTo(300,200,100,600); //相对上一个位置坐标 开始画曲线
//画三次贝塞尔曲线
// path.cubicTo(0, 100, 400, 200, 500, 100);
// path.rCubicTo(0, 100, 400, 200, 500, 100);//相对上一个位置坐标 开始画曲线
// 移动到指定的位置
// path.lineTo(100, 100);
// path.moveTo(200, 100);// 移动到 200,100 位置 设置图形的起点
// path.lineTo(200, 400);// 从 200,100 的位置 开始画线
// 画弧形
// path.lineTo(100, 100);
/**
* 这个方法和 Canvas.drawArc() 比起来，少了一个参数 useCenter，而多了一个参数 forceMoveTo 。
*少了 useCenter ，是因为 arcTo() 只用来画弧形而不画扇形，
* 所以不再需要 useCenter 参数；
* 而多出来的这个 forceMoveTo 参数的意思是，绘制是要「抬一下笔移动过去」，还是「直接拖着笔过去」，区别在于是否留下移动的痕迹。
*/
// path.arcTo(100, 100, 300, 300, -90, 90, true);// 强制移动到弧形起点(无痕迹)
// path.arcTo(100, 100, 300, 300, -90, 90, false);// 直接连线连到弧形起点（有痕迹）
// path.addArc(100, 100, 300, 300, -90, 90);//addArc() 只是一个直接使用了 forceMoveTo = true 的简化版 arcTo()
//封闭子图形
/**
* 不是所有的子图形都需要使用 close() 来封闭。
* 当需要填充图形时（即 Paint.Style 为 FILL 或 FILL_AND_STROKE），Path 会自动封闭子图形。
*/
// paint.setStyle(Paint.Style.FILL);
// path.moveTo(100, 100);
// path.lineTo(200, 100);
// path.lineTo(150, 150);
// path.close(); //封闭子图形 == path.lineTo(100,100)
// 练习画心形
paint.setStyle(Paint.Style.FILL);
path.addArc(200, 200, 400, 400, -225, 225);
path.arcTo(400, 200, 600, 400, -180, 225, false);
path.lineTo(400, 550);
path.close();
canvas.drawPath(path, paint);
网友评论