美文网首页常用控件Android自定义ViewAndroid技术知识
扔物线大神的《Android 开发进阶: 自定义 View 1-

扔物线大神的《Android 开发进阶: 自定义 View 1-

作者: BetterZhang | 来源:发表于2017-07-13 17:07 被阅读2362次

    GitHub地址:PracticeDraw1

    练习内容1:使用canvas.drawColor()方法把View涂成黄色

    canvas.drawColor(Color.YELLOW);
    

    canvas.drawColor()的使用方法汇总:

    canvas.drawColor(Color.YELLOW);
    canvas.drawColor(Color.parseColor("#00FF00"));
    canvas.drawColor(Color.parseColor("#88FF0000"));
    canvas.drawRGB(255, 0, 0);
    canvas.drawARGB(127, 255, 0, 0);
    

    练习内容2:使用canvas.drawCircle()方法画圆

    一共四个圆:1.实心圆2.空心圆3.蓝色实心圆4.线宽为20的空心圆

    mPaint.setAntiAlias(true);
    
    canvas.drawCircle(350, 200, 150, mPaint);
    
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(4);
    canvas.drawCircle(700, 200, 150, mPaint);
    
    mPaint.setColor(Color.BLUE);
    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(350, 550, 150, mPaint);
    
    mPaint.setColor(Color.YELLOW);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(50);                   // setStrokeWidth只在STROKE的情况下起作用,FILL情况下不起作用
    canvas.drawCircle(700, 550, 150, mPaint);
    
    mPaint.setColor(Color.RED);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(5);
    canvas.drawCircle(700, 550, 150, mPaint);
    
    mPaint.reset();
    

    练习内容3:使用canvas.drawRect()方法画矩形

    mPaint.setAntiAlias(true);
    
    canvas.drawRect(100, 100, 300, 300, mPaint);
    
    mPaint.setColor(Color.RED);
    Rect rect = new Rect(400, 100, 600, 300);
    canvas.drawRect(rect, mPaint);
    
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(4);
    RectF rectF = new RectF(700, 100, 900, 300);
    canvas.drawRect(rectF, mPaint);
    
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setColor(Color.GREEN);
    canvas.drawRoundRect(100, 400, 300, 600, 50, 50, mPaint);
    
    mPaint.setStyle(Paint.Style.STROKE);
    RectF rectF2 = new RectF(400, 400, 600, 600);
    canvas.drawRoundRect(rectF2, 50, 80, mPaint);
    
    mPaint.reset();
    

    练习内容4:使用canvas.drawPoint()方法画点

    mPaint.setAntiAlias(true);
    
    mPaint.setStrokeWidth(100);
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    canvas.drawPoint(100, 100, mPaint);
    
    mPaint.setStrokeCap(Paint.Cap.SQUARE);
    mPaint.setColor(Color.YELLOW);
    canvas.drawPoint(250, 100, mPaint);
    
    mPaint.setStrokeCap(Paint.Cap.BUTT);
    mPaint.setColor(Color.RED);
    canvas.drawPoint(400, 100, mPaint);
    
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    mPaint.setColor(Color.GREEN);
    float[] points = {550, 100, 700, 100, 850, 100, 850, 250, 700, 250, 550, 250};
    //   canvas.drawPoints(points, mPaint);
    canvas.drawPoints(points, 2, 8, mPaint);
    
    mPaint.reset();
    

    练习内容5:使用canvas.drawOval()方法画椭圆

    mPaint.setAntiAlias(true);
    
    canvas.drawOval(50, 50, 350, 200, mPaint);
    
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(4);
    mPaint.setColor(Color.RED);
    RectF rectF = new RectF(450, 50, 750, 200);
    canvas.drawOval(rectF, mPaint);
    
    mPaint.reset();
    

    练习内容6:使用canvas.drawLine()方法画直线

    mPaint.setAntiAlias(true);
    
    mPaint.setStrokeWidth(10);
    canvas.drawLine(50, 50, 200, 200, mPaint);
    
    mPaint.setColor(Color.RED);
    canvas.drawLine(100, 50, 250, 200, mPaint);
    
    mPaint.setColor(Color.GREEN);
    float[] points = {300, 50, 450, 200, 600, 200, 500, 300};
    //   canvas.drawLines(points, mPaint);
    canvas.drawLines(points, 2, 4, mPaint);
    
    mPaint.reset();
    

    练习内容7:使用canvas.drawRoundRect()方法画圆角矩形

    mPaint.setAntiAlias(true);
    
    canvas.drawRoundRect(100, 100, 500, 300, 50, 50, mPaint);
    
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(4);
    mPaint.setColor(Color.RED);
    RectF rectF = new RectF(100, 400, 500, 600);
    canvas.drawRoundRect(rectF, 50, 50, mPaint);
    
    mPaint.reset();
    

    练习内容8:使用canvas.drawArc()方法画弧形和扇形

    mPaint.setAntiAlias(true);
    
    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawArc(200, 100, 800, 500, -110, 100, true, mPaint);
    mPaint.setColor(Color.RED);
    canvas.drawArc(200, 100, 800, 500, 20, 140, false, mPaint);
    
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setColor(Color.GREEN);
    canvas.drawArc(new RectF(200, 100, 800, 500), 180, 60, false, mPaint);
    
    mPaint.reset();
    

    练习内容9:使用canvas.drawPath()方法画心形

    mPaint.setAntiAlias(true);
    Path path = new Path();
    path.addArc(new RectF(600, 200, 800, 400), -225, 225);
    path.arcTo(new RectF(800, 200, 1000, 400), -180, 225, false);
    path.lineTo(800, 542);
    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawPath(path, mPaint);
    
    mPaint.reset();
    

    练习内容10:使用各种Canvas.drawXXX()方法画直方图

    mPaint.setAntiAlias(true);
    
    // 画图表坐标轴
    Path path = new Path();
    path.moveTo(150, 80);
    path.lineTo(150, 500);
    path.lineTo(900, 500);
    mPaint.setColor(Color.WHITE);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(2);
    canvas.drawPath(path, mPaint);
    
    // 画矩形
    Path path2 = new Path();
    path2.addRect(170, 490, 250, 500, Path.Direction.CW);
    path2.addRect(270, 430, 350, 500, Path.Direction.CW);
    path2.addRect(370, 430, 450, 500, Path.Direction.CW);
    path2.addRect(470, 380, 550, 500, Path.Direction.CW);
    path2.addRect(570, 350, 650, 500, Path.Direction.CW);
    path2.addRect(670, 300, 750, 500, Path.Direction.CW);
    path2.addRect(770, 400, 850, 500, Path.Direction.CW);
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setColor(Color.parseColor("#72B916"));
    canvas.drawPath(path2, mPaint);
    
    // 画文字
    mPaint.setColor(Color.WHITE);
    mPaint.setTextSize(25);
    canvas.drawText("Froyo", 170, 530, mPaint);
    canvas.drawText("GB", 290, 530, mPaint);
    canvas.drawText("ICS", 390, 530, mPaint);
    canvas.drawText("JB", 490, 530, mPaint);
    canvas.drawText("KitKat", 580, 530, mPaint);
    canvas.drawText("L", 700, 530, mPaint);
    canvas.drawText("M", 800, 530, mPaint);
    
    // 画图表文字
    mPaint.setTextSize(40);
    canvas.drawText("直方图", 450, 650, mPaint);
    
    mPaint.reset();
    

    练习内容11:使用各种Canvas.drawXXX()方法画饼图

    mPaint.setAntiAlias(true);
    
    // 画6个扇形
    mPaint.setColor(Color.parseColor("#FFC107"));
    canvas.drawArc(200, 100, 700, 600, -60, 59, true, mPaint);
    mPaint.setColor(Color.parseColor("#9C27B0"));
    canvas.drawArc(200, 103, 700, 603, 0, 6, true, mPaint);
    mPaint.setColor(Color.parseColor("#9E9E9E"));
    canvas.drawArc(200, 106, 700, 606, 8, 6, true, mPaint);
    mPaint.setColor(Color.parseColor("#009688"));
    canvas.drawArc(200, 109, 700, 609, 16, 45, true, mPaint);
    mPaint.setColor(Color.parseColor("#2196F3"));
    canvas.drawArc(197, 109, 697, 609, 63, 117, true, mPaint);
    mPaint.setColor(Color.parseColor("#F44336"));
    canvas.drawArc(190, 95, 690, 595, -180, 120, true, mPaint);
    mPaint.setColor(Color.WHITE);
    mPaint.setTextSize(40);
    canvas.drawText("饼图", 400, 700, mPaint);
    
    mPaint.reset();
    

    最后

    扔物线大神的博客地址:HenCoder

    相关文章

      网友评论

        本文标题:扔物线大神的《Android 开发进阶: 自定义 View 1-

        本文链接:https://www.haomeiwen.com/subject/djzwhxtx.html