通过机器猫的绘制学会Android画布（Canvas）的使用

可以说安卓上面的难点就这么几个：自定义控件、手势事件处理、JNI....
那么，我们今天了解一下自定义控件的一种，那就是Canvas，
有了他你可以-----

为所欲为

再也不要担心美工设计出来的乱七八糟的效果了，
下面我们开始
一般的操作都会通过重写onDraw开始，

下面通过一段代码简单的说一下画布和画笔的使用：

package com.uidemo2;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.WindowManager;

/**
 * @author GONGPENG
 * @CreateTime 2018/3/3 10:27
 */
public class PaintView extends View {
    public Paint circlePaint = new Paint();
    public Paint circleWhitePaint = new Paint();
    public Paint circleLinePaint = new Paint();
    public Paint eyesPint = new Paint();
    public Paint eyesLinePint = new Paint();
    private float width = 0;
    private float higth = 0;
    private float faceX;
    private float faceY;
    private float faceRadius;

    public PaintView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    public PaintView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    public PaintView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    public void initView() {
        /**
         通过这个东西可以获取到屏幕的高度，一般有三中方式：

         1、通过WindowManager获取
           DisplayMetrics dm = new DisplayMetrics();
           heigth = dm.heightPixels; 
           width = dm.widthPixels; 

         2、通过Resources获取
         DisplayMetrics dm = getResources().getDisplayMetrics(); 
         heigth = dm.heightPixels; width = dm.widthPixels; 

         3、获取屏幕的默认分辨率 
         Display display = getWindowManager().getDefaultDisplay(); 
         heigth = display.getWidth(); width = display.getHeight(); 

         当然我更喜欢第二种，因为Context几乎无处不在
         */

         DisplayMetrics dm = getResources().getDisplayMetrics();
        width = dm.widthPixels;
        higth = dm.heightPixels;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //这个吗，设置画笔描边，画出来的图形不会被填充，如果要画实心的，就不要设置这个了
        
        circleLinePaint.setStyle(Paint.Style.STROKE);
        //设置画笔宽度
        circleLinePaint.setStrokeWidth(12f);
        //设置画笔颜色
        circlePaint.setColor(Color.parseColor("#FF4397F1"));
        circleWhitePaint.setColor(Color.WHITE);
        eyesLinePint.setStrokeWidth(10f);
        eyesPint.setColor(Color.WHITE);
        eyesLinePint.setStyle(Paint.Style.STROKE);
        faceX = width / 2;
        faceY = higth / 2 - 100;
        faceRadius = higth / 4;
        //用它可以画圆
        canvas.drawCircle(faceX, faceY, faceRadius, circlePaint);
        canvas.drawCircle(faceX, faceY + faceRadius / 2, faceRadius + 50, circleWhitePaint);


        drawEyeCircle(true, canvas);
        drawEyeCircle(false, canvas);

        canvas.drawCircle(faceX, faceY, faceRadius, circleLinePaint);
        super.onDraw(canvas);
    }

    private void drawEyeCircle(boolean isLeft, Canvas canvas) {

        float eyeWidth = 120f;
        float eyeHidth = 180f;
        float coroWidth = 40f;
        float coroHidth = 80f;
        RectF eye = new RectF();
        eye.left = faceX;
        if (isLeft) {
            eye.left = eye.left - eyeWidth;
        } else {
            eye.left = eye.left + 10f;
        }

        eye.right = faceX;

        if (!isLeft) {
            eye.right = eye.right + eyeWidth + 10f;
        }
        eye.top = (faceY - faceRadius) + 40 + eyeHidth / 2;
        eye.bottom = eye.top + eyeHidth;

        RectF eyeCircle = new RectF();
        eyeCircle.left = eye.left - 10f;
        eyeCircle.right = eye.right + 10f;
        eyeCircle.top = eye.top - 10f;
        eyeCircle.bottom = eye.bottom + 10f;
        Paint coroPiant = new Paint();
        coroPiant.setStyle(Paint.Style.STROKE);
        coroPiant.setStrokeWidth(25f);
        //用这个确定图形的位置
        RectF coroRect = new RectF();


        if (isLeft) {
            coroRect.left = eye.right - coroWidth - 30f;
        } else {
            coroRect.left = eye.left + 30f;
        }
        coroRect.bottom = eye.bottom - 40f;
        coroRect.top = coroRect.bottom - coroHidth;
        coroRect.right = coroRect.left + coroWidth;
        canvas.drawOval(eye, eyesPint);
        canvas.drawOval(eyeCircle, eyesLinePint);
        canvas.drawOval(coroRect, coroPiant);

        RectF mouse = new RectF();
        float re = faceRadius - 60f;

        mouse.top = (faceY - re) + 20f;
        mouse.bottom = mouse.top + re * 2;
        mouse.left = (faceX - re);
        mouse.right = (faceX + re);
        //用这个话弧形，第一个参数是弧形位置，第二个是开始角度，第三个是绘制的扇面角度，第三个是否填充扇
        //面，当然，设置画笔属性为setStyle(Paint.Style.STROKE)的时候是看不出来的
        canvas.drawArc(mouse, 0, 180, false, circleLinePaint);
        canvas.drawLine(faceX + 8f,eye.bottom + 40f,faceX + 8f,mouse.bottom,circleLinePaint);

        float startY1 = faceY;
        float startX1 = faceX - 120f;
        float startX2 = faceX + 120f;
        float stopX1 = faceX - faceRadius;
        float stopX2 = faceX + faceRadius;
        //划线，参数分别是：起始点的x,y,结束点的x,y 所使用的画笔
        canvas.drawLine(startX1,startY1,stopX1,startY1,circleLinePaint);
        canvas.drawLine(startX2,startY1,stopX2,startY1,circleLinePaint);

        canvas.drawLine(startX1,startY1 - 40f,stopX1,startY1 - 80,circleLinePaint);
        canvas.drawLine(startX2,startY1 - 40f,stopX2,startY1 - 80,circleLinePaint);

        canvas.drawLine(startX1,startY1 + 40f,stopX1,startY1 + 80,circleLinePaint);
        canvas.drawLine(startX2,startY1 + 40f,stopX2,startY1 + 80,circleLinePaint);

        canvas.drawLine(faceX + 8f,eye.bottom + 40f,faceX + 8f,mouse.bottom,circleLinePaint);

        Paint nousePaint = new Paint();
        nousePaint.setColor(Color.RED);
        canvas.drawCircle(faceX + 8f, eye.bottom + 40f, 50f, nousePaint);
        canvas.drawCircle(faceX + 8f, eye.bottom + 40f, 50f, circleLinePaint);

    }

}

好了，白话完了，让你们看下作品，其实这才是我的真实目的，哈哈哈哈哈哈哈哈哈.....

Screenshot_20181103-144251.jpg