引言

Canvas相信大家都不会陌生，虽然看来很简单，也知道各种API的用法和作用，但是很多人觉得自定义View很难，很大一部分原因就是对于Canvas不够熟悉，或许看教材和视频只是教你要移动translate、rotate、save、restore等，很少告知你为什么这样做，导致你只能照敲不能灵活应用。所以知其然更要知其所以然，授人以鱼不如授人以渔，这篇文章我争取把Android 2D绘画的一些相关知识点总结出来。

一、Android系统坐标系

把Android绘画当成现实中的画家作画，Canvas自然就是画家笔下的画板，而画家自然就是Android系统本身，在现实生活中画家可以自主决定从哪个点开始起笔，又延伸到哪点，而在机器世界里都是需要去一系列的逻辑计算的，因而坐标系应运而生，在Android中主要有两大坐标系：Android坐标系和视图坐标系。

这里写图片描述

1、Android坐标系

Android坐标系可以看成是物理存在的坐标系，也可以理解为绝对坐标，以屏幕为参照物，就是以屏幕的左上角是坐标系统原点（0,0），原点向右延伸是X轴正方向，原点向下延伸是Y轴正方向。比如系统的getLocationOnScreen(int[] location)实际上获取Android坐标系中位置（即该View左上角在Android坐标系中的坐标），还有getRawX()、getRawY()获取的坐标也是Android坐标系的坐标。

2、视图坐标系

视图坐标系是相对坐标系，是以父视图为参照物，以父视图的左上角为坐标原点（0，0），原点向右延伸是X轴正方向，原点向下延伸是Y轴正方向，getX()、getY()就是获取视图坐标系下的坐标。

3、两种坐标系在Android的应用

这里写图片描述

3.1、子View获取自身尺寸信息

• getHeight()：获取View自身高度
• getWidth()：获取View自身宽度

3.2、子View获取自身坐标信息

子View的存在是依附于父View的，所以用的是相对坐标来表示，如下方法可以获得子View到其父View（ViewGroup）的距离：

• getLeft()：获取子View自身左边到其父View左边的距离
• getTop()：获取子View自身顶边到其父View顶边的距离
• getRight()：获取子View自身右边到其父View左边的距离
• getBottom()：获取子View自身底边到其父View顶边的距离
• getMargingXxxx：获取子View的边框距离父ViewGroup边框的距离即外边距，Xxxx代表Left、Right、Top、Bootom。
• • getPaddingXxxx：获取子View内部的内容的边框距离子View的边框的距离即内边距，Xxxx代表Left、Right、Top、Bootom。

3.3、获取MotionEvent中对应坐标信息

无论是View还是ViewGroup，Touch事件都会经由onTouchEvent(MotionEvent event)方法来处理，通过MotionEvent实例event可以获取相关坐标信息。

• getX()：获取Touch事件当前触摸点距离控件左边的距离，即视图坐标下对应的X轴的值
• getY()：获取Touch事件距离控件顶边的距离，即视图坐标系下对应的Y轴的值
• getRawX()：获取Touch事件距离整个屏幕左边距离，即绝对坐标系下对应的X轴的值
• getRawY()：获取Touch事件距离整个屏幕顶边的的距离，即绝对坐标系下对应的Y轴的值

3.4、获取view在屏幕中的位置

如果在Activity的OnCreate()事件调用这些方法，那么输出那些参数全为0，必须要等UI控件都加载完了才能获取到。

• getLocalVisibleRect() ：返回一个填充的Rect对象， 所有的View都是以一块矩形内存空间存在的

• getGlobalVisibleRect() ：获取Android坐标系的一个视图区域， 返回一个填充的Rect对象且该Rect是基于总整个屏幕的

• getLocationOnScreen ：计算该视图在Android坐标系中的x，y值，获取在当前屏幕内的绝对坐标
  （这个值是要从屏幕顶端算起，当然包括了通知栏和状态栏的高度）

• getLocationInWindow ，计算该视图在它所在的widnow的坐标x，y值，获取在整个window的绝对坐标

    int[] location = new int[2];
    view.getLocationOnScreen(location);
    int x = location[0];
    int y = location[1];

二、Paint

Paint即画笔，在绘图过程中起到了极其重要的作用，画笔主要保存了颜色， 样式等绘制信息，指定了如何绘制文本和图形，画笔对象有很多设置方法，大体上可以分为两类，一类与图形绘制相关，一类与文本绘制相关。

三、Canvas绘图

1、canvas.translate(x,y)

translate其实是把圆心坐标移动，比如说canvas.translate(200,200)，则是把圆心移动到原来（200，200）处，若是移动canvas.translate(200,0)也是如此，相当于改变圆心的x坐标，y坐标不变。

这里写图片描述

2、canvas.rotate(degree)

rotate(float degrees)这个方法的旋转中心是坐标的原点

这里写图片描述

3、translate和rotate

这里写图片描述

4、onMeasure方法详解及实现

在自定义View时重写onDraw方法是为了绘制控件或者UI，而要想能在布局文件中正确的使用，往往还需要重写onMeasure方法计算位置 ，要想计算位置就得先测量自身的尺寸大小。至于实现请关注下篇文章。

5、测试代码

package crazymo.com.drawcanvas;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new CustomView(this));

    }

    class CustomView extends View {

        Paint paint;

        public CustomView(Context context) {
            super(context);
            //初始化画笔
            paint = new Paint(Paint.ANTI_ALIAS_FLAG);//在画图的时候，图片如果旋转或缩放之后，总是会出现那些华丽的锯齿。给Paint加上抗锯齿标志
            paint .setAntiAlias(true);
            paint.setColor(Color.GREEN);
            paint.setStrokeJoin(Paint.Join.ROUND);
            paint.setStrokeCap(Paint.Cap.ROUND);
            paint.setStrokeWidth(16);
        }

        //在这里我们将测试canvas提供的绘制图形方法
        @Override
        protected void onDraw(Canvas canvas) {
            //canvas.translate(200,200);
            //canvas.rotate(30);
            //drawCircle(50,50,90,canvas,paint);
            drawLine(canvas);
            paint.setColor(0xFFDD0000);
            drawALine(250+30, 250, 400+30, 400,canvas, paint);
            drawCircle(0,0,90,canvas,paint);
        }

        /**
         * 画圆
         * @param cx 圆心x坐标
         * @param cy 圆心y坐标
         * @param radius 半径
         * @param paint paint对象
         */
        private void drawCircle(int cx,int cy,float radius,Canvas canvas,Paint paint){
            canvas.drawCircle(cx,cy,radius,paint);
        }

        private void drawLine(Canvas canvas){
            //画一条线
            canvas.drawLine(250, 250, 400, 400, paint);
        }

        private void drawALine(float startX,float startY,float stopX,float stopY,Canvas canvas,Paint paint){
            //画一条线
            canvas.drawLine( startX, startY, stopX, stopY,paint);
        }
    }

}

6、Layer图层

Android中的绘图机制很多都是借鉴了Photoshop的概念，在Photoshop中一张原始的素材可能是由很多图层叠加而成，Android也借鉴了这一机制，所谓Layer图层其本质就是内存中一块矩形的区域，在Android中图层是基于栈的数据结果进行管理的，通过方法canvas.saveLayer或saveLayerAlpha来创建新的（带有透明度的）图层并且放入到图层栈中，出栈则是通过方法restore、restoreToCount，出入栈造成的操作区别是：入栈时所有的绘制操作都发生在当前这个图层，而出栈之后则会把操作绘制到上一个图层。

    @Override
    protected void onDraw(Canvas canvas) {
        //相当于是默认绘制白色背景、蓝色圆在整个画布上，可以看成PS中的背景
        canvas.drawColor(Color.WHITE);
        paintOutSide.setColor(Color.BLUE);
        canvas.drawCircle(100,100,100,paintOutSide);
   
        canvas.saveLayerAlpha(0,0,400,400,125,ALL_SAVE_FLAG);//执行saveLayerAlpha 相当于是创建了一个新的图层绘制红色圆，其中125代表alpha值0~255，你可以尝试着修改透明值进行测试可以加深对于图层的理解
        paintOutSide.setColor(Color.RED);
        canvas.drawCircle(150,150,100,paintOutSide);
        canvas.restore();
        
    }

7、canvas.save()和canvas.restore()

save和restore通俗解释就是：save的作用就是将之前所有的绘制操作保存到内存中，让后续的操作在新的内存空间操作，就像是Photoshop中的前面的操作保存到一个图层中，save之后的操作再保存到新的图层；而restore的话就相当于是Photoshop中的合并图层的操作比如你可以先保存目前画纸的位置(save)，然后旋转90度，向下移动100像素后画一些图形，画完后调用restore方法合并图层。

这里写图片描述

/**
 * Auther: Crazy.Mo
 * DateTime: 2017/4/28 16:34
 * Summary:
 */
public class ClockView extends View {
    private Context context;
    private Paint paintOutSide,paintDegree;
    private float outWidth,outHeight;

    public ClockView(Context context) {
        this(context, null);
        init(context);
    }

    public ClockView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
        init(context);
    }

    public ClockView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context){
        this.context=context;
        initOutSize();
    }

    private void initOutSize(){
        WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);//获取WM对象
        DisplayMetrics dm = new DisplayMetrics();
        manager.getDefaultDisplay().getMetrics(dm);
        outHeight=(float) dm.heightPixels;//获取真实屏幕的高度以px为单位
        outWidth=(float)dm.widthPixels;
    }

    /**
     * 画外圈圆
     * @param canvas
     */
    private void drawOutCircle(Canvas canvas){
        paintOutSide=new Paint();
        paintOutSide.setColor(Color.GREEN);
        paintOutSide.setStyle(Paint.Style.STROKE);
        paintOutSide.setAntiAlias(true);
        paintOutSide.setDither(true);
        paintOutSide.setStrokeWidth(6f);
        canvas.drawCircle(outWidth/2.0f,outHeight/2.0f,outWidth/2.0f,paintOutSide);
    }

    /**
     * 画刻度
     */
    private void drawDegree(Canvas canvas){
        paintDegree=new Paint();
        paintDegree.setColor(Color.RED);
        paintDegree.setStyle(Paint.Style.STROKE);
        paintDegree.setAntiAlias(true);
        paintDegree.setDither(true);
        paintDegree.setStrokeWidth(3f);
        for(int i=0;i<24;i++){
            if(i==0||i==6||i==12||i==18){
                paintDegree.setStrokeWidth(6f);
                paintDegree.setTextSize(30);
                canvas.drawLine(outWidth/2.0f,(outHeight/2.0f-outWidth/2.0f),outWidth/2.0f,(outHeight/2.0f-outWidth/2.0f+60),paintDegree);
                String degreeTxt=String.valueOf(i);
                canvas.drawText(degreeTxt,(outWidth/2-paintDegree.measureText(degreeTxt)/2),(outHeight/2-outWidth/2+90),paintDegree);
            }else {
                paintDegree.setStrokeWidth(4f);
                paintDegree.setTextSize(20);
                canvas.drawLine(outWidth/2.0f,(outHeight/2.0f-outWidth/2.0f),outWidth/2.0f,(outHeight/2.0f-outWidth/2.0f+40),paintDegree);
                String degreeTxt=String.valueOf(i);
                canvas.drawText(degreeTxt,(outWidth/2-paintDegree.measureText(degreeTxt)/2)+20,(outHeight/2-outWidth/2+40),paintDegree);
            }
            canvas.rotate(15,outWidth/2,outHeight/2);
        }
    }

    private void drawPointor(Canvas canvas){
        Paint paintHour=new Paint();
        paintHour.setColor(Color.RED);
        paintHour.setStyle(Paint.Style.STROKE);
        paintHour.setAntiAlias(true);
        paintHour.setDither(true);
        paintHour.setStrokeWidth(12f);
        Paint paintMin=new Paint();
        paintMin.setColor(Color.RED);
        paintMin.setStyle(Paint.Style.STROKE);
        paintMin.setAntiAlias(true);
        paintMin.setDither(true);
        paintMin.setStrokeWidth(8f);
        canvas.save();
        canvas.translate(outWidth/2,outHeight/2);
        canvas.drawLine(0,0,100,100,paintHour);
        canvas.drawLine(0,0,100,150,paintMin);
        canvas.restore();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawOutCircle(canvas);
        drawDegree(canvas);
        drawPointor(canvas);
    }
}

下一篇总结下onMeasure的实现和View的基本绘制流程。