自定义View之HenCoder学习笔记

本文是学习公众号 hencoder 中的自定义View部分的学习笔记。

1-1 onDraw()和Paint详解

具体参考http://hencoder.com/ui-1-1/ 写的非常详细

练习：画弧形，扇形，心形，直方图，饼图

1-1-1.弧形 扇形 使用 canvas.drawArc()

drawArc() 是使用一个椭圆来描述弧形的。left, top, right, bottom 描述的是这个弧形所在的椭圆；startAngle 是弧形的起始角度（x 轴的正向，即正右的方向，是 0 度的位置；顺时针为正角度，逆时针为负角度），sweepAngle 是弧形划过的角度；useCenter 表示是否连接到圆心，如果不连接到圆心，就是弧形，如果连接到圆心，就是扇形。

        Paint paint = new Paint();
        paint.setStyle(Paint.Style.FILL); // 填充模式
//        canvas.drawOval(200, 100, 800, 500,paint);
        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); // 画线模式
        canvas.drawArc(200, 100, 800, 500, 180, 60, false, paint); // 绘制不封口的弧形

1-1-2 心形

使用drawPath(Path path, Paint paint)
Path类中的各种方法Hencoder已经写的非常清楚

        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.RED);
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.STROKE);
        Path path = new Path();
        //画圆弧，圆弧的最左侧距离y轴距离200 最上距离x轴距离200，
        //最下距离x轴400 最右距离y轴400
        // 开始弧度-225 弧形扫过的角度225
        path.addArc(200, 200, 400, 400, -225, 225);
        //画圆弧，圆弧的最左侧距离y轴距离400 最上距离x轴距离200，
        //最下距离x轴400 最右距离y轴600 
        //开始弧度-180 弧形扫过的角度225 保留移动痕迹
        path.arcTo(400, 200, 600, 400, -180, 225, false);
        path.lineTo(400, 542);//从当前位置画线到（400,542）
        path.close();//闭合图形
        canvas.drawPath(path,paint);

图片.png

该图是对这句代码的解释，剩下的几句代码的解释注释中都已写的很清楚。

        //画圆弧，圆弧的最左侧距离y轴距离200 最上距离x轴距离200，
        // 最下距离x轴400 最右距离y轴400 开始弧度-225 弧形扫过的角度225
        path.addArc(200, 200, 400, 400, -225, 225);

1-1-3 画直方图

确定好坐标后，画坐标系，文字，矩形，如下图所示

图片.png

        Paint paint = new Paint();
        //绘制坐标系
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(2);
        paint.setColor(Color.WHITE);
        Path path = new Path();
        path.moveTo(150,100);//移动起点到(150,100)
        path.lineTo(150,500);//从(150,100)开始画线，画到(150,150)处
        path.lineTo(900,500);
        canvas.drawPath(path,paint);

        //绘制文字
        paint.setTextSize(22);
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeWidth(1);
        canvas.drawText("Froyo",200,520,paint);
        canvas.drawText("GB",315,520,paint);
        canvas.drawText("ICS",415,520,paint);
        canvas.drawText("JB",515,520,paint);
        canvas.drawText("KitKat",605,520,paint);
        canvas.drawText("L",725,520,paint);
        canvas.drawText("M",825,520,paint);

        //绘制长方形
        paint.setColor(getResources().getColor(R.color.green_light));
        paint.setStyle(Paint.Style.FILL);
        canvas.drawRect(190,495,270,500,paint);
        canvas.drawRect(290,485,370,500,paint);
        canvas.drawRect(390,485,470,500,paint);
        canvas.drawRect(490,350,570,500,paint);
        canvas.drawRect(590,250,670,500,paint);
        canvas.drawRect(690,180,770,500,paint);
        canvas.drawRect(790,370,870,500,paint);

1-1-4 绘制饼图

1.绘制扇形
分析如下图所示

饼图分析.png

此处使用的是canvas的drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 其中各参数的作用：left, top, right, bottom 描述的是这个弧形所在的椭圆；startAngle 是弧形的起始角度（x 轴的正向，即正右的方向，是 0 度的位置；顺时针为正角度，逆时针为负角度），sweepAngle 是弧形划过的角度；useCenter 表示是否连接到圆心，如果不连接到圆心，就是弧形，如果连接到圆心，就是扇形。

注意要计算好角度
 Paint paint = new Paint();
        Path path = new Path();
        //红色区域
        paint.setColor(getResources().getColor(R.color.red_light));
        canvas.drawArc(200,150,558,500,-180,125,true,paint);
        //圆心（385,325） 直径350

        //黄色区域
        paint.setColor(getResources().getColor(R.color.yellow_light));
        //left, top, right, bottom 描述的是这个弧形所在的椭圆；startAngle 是弧形的起始角度
        //sweepAngle 是弧形划过的角度；useCenter 表示是否连接到圆心
        canvas.drawArc(210,157,568,507,-55,55,true,paint);

        //紫色区域
        paint.setColor(getResources().getColor(R.color.purple_light));
        canvas.drawArc(210,157,568,507,3,8,true,paint);

        //灰色区域
        paint.setColor(getResources().getColor(R.color.grey_light));
        canvas.drawArc(210,157,568,507,13,7,true,paint);
        //青色区域
        paint.setColor(getResources().getColor(R.color.cyan_light));
        canvas.drawArc(210,157,568,507,22,55,true,paint);

        //蓝色区域
        paint.setColor(getResources().getColor(R.color.blue_light));
        canvas.drawArc(210,157,568,507,79,98,true,paint);

2.绘制白色的指示线
白色指示线的终点在每个弧形中点的位置，计算出每个白线中点。

        //画线
        paint.setColor(Color.WHITE);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(1);
       path.moveTo(170,180);
       path.lineTo(240,180);
       path.lineTo(250,200);
       canvas.drawPath(path,paint);

       //第二条线 （385,325）圆心
        path.moveTo(680,250);
        path.lineTo(580,250);
        path.lineTo(550,270);
        canvas.drawPath(path,paint);

        //第三条线
        path.moveTo(680,370);
        path.lineTo(640,370);
        path.lineTo(620,350);
        path.lineTo(565,350);
        canvas.drawPath(path,paint);

        //第四条线
        path.moveTo(680,400);
        path.lineTo(640,400);
        path.lineTo(620,380);
        path.lineTo(563,380);
        canvas.drawPath(path,paint);

        //第五条线
        path.moveTo(600,470);
        path.lineTo(550,470);
        path.lineTo(520,450);
        canvas.drawPath(path,paint);

        //第六条线
        path.moveTo(170,470);
        path.lineTo(240,470);
        path.lineTo(250,450);
        canvas.drawPath(path,paint);

       //绘制文字
        paint.setStyle(Paint.Style.FILL);
        paint.setTextSize(20);
        canvas.drawText("Lollipop",90,185,paint);
        canvas.drawText("Marshmallow",690,255,paint);
        canvas.drawText("Gingerbread",690,375,paint);
        canvas.drawText("Ice Cream Sandwich",690,405,paint);
        canvas.drawText("Jelly Bean",610,475,paint);
        canvas.drawText("KitKat",100,475,paint);

1-2 Paint 详解

具体参考：http://hencoder.com/ui-1-2/ 写的十分详细

1-3 drawText() 文字的绘制

具体参考：http://hencoder.com/ui-1-3/ 也是写的十分详细

1-4 Canvas 对绘制的辅助 clipXXX() 和 Matrix

具体参考： http://hencoder.com/ui-1-4/ 知识点写的十分详细

1-4-1 clipXXX()方法 裁切方法

1） clipRect() 在矩形范围内裁切

      //加上save和restore 恢复到裁切之前的状态 不然后面都会裁切掉
        canvas.save();
        canvas.clipRect(left,top, left+300,top+200);
        canvas.drawBitmap(bitmap, left, top, paint);
        canvas.restore();

2. clipPath() 根据Path形状裁切

   //  第一种：   1.画出path 圆
        path1.addCircle(point1.x + 200,point1.y + 200,150, Path.Direction.CW);
       //2.根据path裁切
        canvas.save();
        canvas.clipPath(path1);
        canvas.drawBitmap(bitmap, point1.x, point1.y, paint);
        canvas.restore();



        //第二种：
        /**
         * FillType 有四个值：
         *  1.EVEN_ODD： Specifies that "inside" is computed by an odd number of edge crossings.
         *  2.INVERSE_EVEN_ODD：Same as EVEN_ODD, but draws outside of the path, rather than inside.
         *  3.WINDING：Specifies that "inside" is computed by a non-zero sum of signed edge crossings.
         *  4.INVERSE_WINDING：Same as WINDING, but draws outside of the path, rather than inside.
         */
        path2.setFillType(Path.FillType.INVERSE_WINDING);
        path2.addCircle(point2.x+ 200,point2.y + 200,150, Path.Direction.CCW);

       canvas.save();
        canvas.clipPath(path2);
        canvas.drawBitmap(bitmap, point2.x, point2.y, paint);
        canvas.restore();

上面Path的FillType，详细解释可见：
http://android.jobbole.com/83427/

1-4-2 几何变换

几何变换的使用大概分为三类：
1. 使用 Canvas 来做常见的二维变换；
2.使用 Matrix 来做常见和不常见的二维变换；
3.使用 Camera 来做三维变换。

1） 使用 Canvas 来做常见的二维变换：
注意：1.canvas的几何变换可以叠加使用，但是叠加时，要倒着写，需要先实现的效果写在后面
2.在做几何变换之前，需要使用save保存状态，做之后使用restore恢复状态
1.1 Canvas.translate(float dx, float dy) 平移

        canvas.save();
        //向右移动200
        canvas.translate(200,0);
        canvas.drawBitmap(bitmap, point1.x, point1.y, paint);
        canvas.restore();
        canvas.save();
        //向左移动100
        canvas.translate(-100,0);
        canvas.drawBitmap(bitmap, point2.x, point2.y, paint);
        canvas.restore();

1.2 旋转Canvas.rotate(float degrees, float px, float py)

        canvas.save();
        //如果想要两个效果叠加使用 需要倒着写，比如说想要先旋转再移动 需要把移动写在旋转之前
        canvas.rotate(45,point1.x + bitmapWidth/2,point1.y+ bitmapHeight/2);
        canvas.translate(200,100);
        //先移动 再绘制 先旋转 再绘制
        canvas.drawBitmap(bitmap, point1.x, point1.y, paint);
        canvas.restore();

1.3 缩放 Canvas.scale(float sx, float sy, float px, float py)

        canvas.save();
        //参数里的 sx sy 是横向和纵向的放缩倍数； px py 是放缩的轴心。
        canvas.scale(1.3f,1.3f,point1.x + bitmapWidth/2 ,point1.y + bitmapHeight/2);
        canvas.drawBitmap(bitmap, point1.x, point1.y, paint);
        canvas.restore();

1.4 skew(float sx, float sy) 错切

  //参数里的 sx 和 sy 是 x 方向和 y 方向的错切系数。
        canvas.save();
        canvas.skew(0, 0.5f);
        canvas.drawBitmap(bitmap, point1.x, point1.y, paint);
        canvas.restore();

2. 使用 Matrix 来做变换
   2.1 使用 Matrix 来做常见变换
   Matrix 做常见变换的方式:
   1.创建 Matrix 对象；
   2.调用 Matrix 的 pre/postTranslate/Rotate/Scale/Skew() 方法来设置几何变换，Matrix做几何变换时，可以自己设定顺序，pre是插入在某个效果之前，post是在某个效果之后。；
   3.使用 Canvas.setMatrix(matrix) 或 Canvas.concat(matrix) 来把几何变换应用到 Canvas。

1）平移

       canvas.save();
        matrix.reset();
        matrix.postTranslate(-100, -100);
        canvas.concat(matrix);
        canvas.drawBitmap(bitmap, point1.x, point1.y, paint);
        canvas.restore();

        canvas.save();
        matrix.reset();
        matrix.postTranslate(200, 0);
        canvas.concat(matrix);
        canvas.drawBitmap(bitmap, point2.x, point2.y, paint);
        canvas.restore();

2. 缩放

把 Matrix 应用到 Canvas 有两个方法： Canvas.setMatrix(matrix) 和 Canvas.concat(matrix)。
1.Canvas.setMatrix(matrix)：用 Matrix 直接替换 Canvas 当前的变换矩阵，即抛弃 Canvas 当前的变换，改用 Matrix 的变换（注：根据下面评论里以及我在微信公众号中收到的反馈，不同的系统中 setMatrix(matrix) 的行为可能不一致，所以还是尽量用 concat(matrix) 吧）；
2.Canvas.concat(matrix)：用 Canvas 当前的变换矩阵和 Matrix 相乘，即基于 Canvas 当前的变换，叠加上 Matrix 中的变换。