Android中canvas学习笔记

第三届互联网大会结束时间不长，却给我的触动很大，看到了很多的AI（人工智能），或许将来的某一天很多职业会被AI替代，包括80%的程序员，我们做为社会中的一份子，只有不断的提升自己，居安思危，才不会被这个快速发展的社会淘汰。

最近遇到了好几个自定义view 的功能，其实自定义view的步骤不多，其中有2个关键的位置，OnMeasure()和OnDraw()这2个方法的重写。一些复杂好看的view都是要在这2个方法中做很多的处理。但是我在用的过程中对canvas和 paint这2个类不熟悉，所以在此记录canvas和paint的基本用法。

先来看看效果：

首先我们自己新建一个类，然后基础view，并且重写它的构造方法和OnDraw()方法

public class MyCanvasDrawView extends View {
    public MyCanvasDrawView(Context context) {
        super(context);
    }

然后我们在MainActivity中直接new我们自定义的view的对象就可以了，这样OnDraw()方法就会执行

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new MyCanvasDrawView(this));
    }
}

接下来就是我们在OnDraw()方法中使用canvas绘制了.......

@Override
    protected void onDraw(Canvas canvas) {
        Paint paint = new Paint(); //设置一个画笔
        /**
         * 1.绘制圆,椭圆
         */

        //画圆 参数为圆心坐标和半径
        paint.setColor(Color.YELLOW);
        paint.setStrokeWidth(3);//设置空心边框的宽度
        canvas.drawCircle(70, 70, 60, paint);//三个参数分别表示：距离x轴的距离，y轴的距离，半径
        //设置画笔的风格为实心，可以看到默认的就是实心
        paint.setStyle(Paint.Style.FILL);
        //设置ARGB，值为0~255   A 代表透明度  r，g，b代表颜色值
        paint.setARGB(90,100,120,120);
        canvas.drawCircle(210, 70, 60, paint);
        paint.setStyle(Paint.Style.STROKE);//设置空心
        paint.setAntiAlias(false);//设置画笔的锯齿效果
        paint.setStrokeWidth(20);//设置空心边框的宽度
        canvas.drawCircle(360, 70, 60, paint);

        //绘制一个椭圆
        //canvas.drawOval(500,70,100,70,paint);
        RectF mRectf = new RectF(500,10,800,150);//定义个矩形区域，参数为对角的2个点的坐标
        canvas.drawOval(mRectf,paint);

        /**
         * 2.绘制矩形
         */
        paint.setStrokeWidth(5);
        //这种写法其实和new RectF（20,170,300,300）类似
        canvas.drawRect(20,170,300,300,paint);
        //还可以使用RectF 来绘制
        mRectf = new RectF(350,170,500,300);
        canvas.drawRect(mRectf,paint);
        //绘制一个圆角矩形
        mRectf = new RectF(520,170,800,300);
        //第二、三个参数分别定义x和y方向的圆角弧度
        //canvas.rotate(10);顺时针旋转
        canvas.drawRoundRect(mRectf,40,40,paint);

        /**
         * 3 .绘制线
         */
        canvas.drawLine(20,320,200,400,paint);
        //绘制一条折线
        float[] ps = {//线的集合
            220,350,320,400,//第一组点
                320,400,400,250,//第二组点
                400,250,600,320 //第三组点
        };
        //绘制一个多变形
        canvas.drawLines(ps,paint);
        Path mPath = new Path();
        mPath.moveTo(100, 100);
        mPath.lineTo(200, 100);
        mPath.lineTo(150, 150);
        mPath.lineTo(150, 350);
        mPath.close();
        paint.setColor(Color.GREEN);
        canvas.drawPath(mPath, paint);
        //绘制一个五角星
        float[] ps1 = {
          700,360,1000,360,
                1000,360,760,550,
                760,550,850,280,
                850,280,940,550,
                940,550,700,360
        };
        canvas.drawLines(ps1,paint);


        /**
         * 4. 画笑脸弧线
         */
        paint.reset();//重置画笔
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);
        paint.setColor(Color.GREEN);
        mRectf=new RectF(20,500,120,540);
        canvas.drawArc(mRectf, 180, 180, false, paint);//小弧形
        mRectf.set(230, 500, 330, 540);
        canvas.drawArc(mRectf, 180, 180, false, paint);//小弧形
        mRectf.set(70, 580, 280, 620);
        canvas.drawArc(mRectf, 0, 180, false, paint);//小弧形


        Shader mShader = new LinearGradient(0, 0, 100, 100,
                new int[] { Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW,
                        Color.LTGRAY }, null, Shader.TileMode.REPEAT); // 一个材质,打造出一个线性梯度沿著一条线。
        paint.setShader(mShader);
        paint.setStyle(Paint.Style.FILL);
        RectF oval2 = new RectF(60, 640, 400, 860);// 设置个新的长方形，扫描测量
        canvas.drawArc(oval2, 200, 130, true, paint);


        //画曲线
        paint.reset();//重置画笔
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);
        paint.setColor(Color.RED);
        mPath = new Path();
        mPath.moveTo(500, 700);

        //把这三个点顺序连起来（400, 700-> 500, 480-> 600, 700）
        mPath.quadTo(600, 480, 700, 700);
        //以上次绘制的最后一个点为起点（600, 700->700, 880->800, 700）
        mPath.quadTo(800, 880, 900, 700);
        canvas.drawPath(mPath, paint);
        canvas.drawLine(450,700,1000,700,paint);



        /**
         * 5.画文字
         */
        paint.reset();
        paint.setTextSize(50);

        canvas.drawText("cancas绘制文本", 20, 800, paint);
        canvas.drawPosText("安卓绘制文本", new float[]{
                20,840, //第一个字母在坐标10,10
                50,870, //第二个字母在坐标20,20
                80,900, //....
                110,920,
                140,950,
                170,980

        }, paint);
    }

注释已经很详细，就不在多赘述了，记录下以后忘记的时候看