Canvas深入学习（二）----canvas坐标系

我记得我在刚开始接触自定义控件的时候，当我拿到各种坐标点的时候，我就知道它存在一个坐标系，但具体怎么个坐标系法，却不是太清楚，今天就开始整理一下。

首先，坐标系是依附于canvas上的，canvas实际上就是一个用来保存像素的Bitmap,我们自定义控件其实就是根据坐标在canvas上画东西的一个过程。

canvas里的两种坐标系

一、Canvas自己的坐标系

首先看一下图

Canvas自己的坐标系

我们假设蓝色的部分就是canvas画板，那么canvas自己的坐标系原点就在左上角，同时原点往右就是x轴的正半轴，往下就是y轴的正半轴

!!!需要注意的是，该坐标系有且只有一个，唯一不变

二、Canvas绘图坐标系

绘图坐标系不是唯一不变的，它与canvas的Matrix有关系，当Matrix发生改变的时候，绘图坐标系也对应着进行改变，同时这个过程是不可逆的。
Matrix又是通过我们设置translate(平移)、rotate(旋转)、scale(缩放)、skew(斜拉)来进行改变

下面从坐标转换来理解canvas绘图坐标系

绘图坐标系

来看代码

        //首先初始化画笔
        paint = new Paint();
        paint.setColor(Color.RED);//设置画笔红色
        paint.setStyle(Paint.Style.FILL);//填充内部
        paint.setAntiAlias(true);//消除锯齿
        paint.setStrokeWidth(30);//宽度
        //为了方便观察，先把canvas背景设置为灰色，再移动到点（200，200）处
        canvas.drawColor(Color.GRAY);
        canvas.translate(200,200);
    
        先画一个红色的矩形
        RectF rectF = new RectF(0,0,600,700);
        canvas.drawRect(rectF,paint);

        //然后绘图坐标系平移到点（100，100），画绿色的框框
        canvas.translate(100,100);
        paint.setColor(Color.GREEN);
        canvas.drawRect(rectF,paint);
        //然后绘图坐标系旋转20度，画黄色的框框
        canvas.rotate(20);
        paint.setColor(Color.YELLOW);
        canvas.drawRect(rectF,paint);

这里我们再次来看一下这个过程，首先我们把canvas画布变成灰色，然后移动画红框框，再移动画绿框框，再旋转画黄色的框框

！！ 我们发现灰色的部分自始自终都没有移动，而我们又通过一系列操作画了3个不同颜色的框框，说明灰色的坐标系没有变，而画框框的坐标系一直在改变。所以这里再次说明，canvas自己的坐标系有且只有一个，且唯一不变，还有一个绘图坐标系，他会根据我们的操作进行相应的偏移.

下面分别看一下其它几种改变绘图坐标系的操作代码

缩放Scale

        RectF r = new RectF(0, 0, 400, 500);
        canvas.drawRect(r, paint);
        paint.setColor(Color.BLUE);
        //sx,sy：分别对x/y方向的一个缩放系数,画布的缩放会导致里面所有的绘制的东西都会有一个缩放效果
        canvas.scale(1.5f, 0.5f);
        canvas.drawRect(r, paint);*/

斜拉画布Skew

        RectF r = new RectF(100, 100, 600, 800);
        canvas.drawRect(r, paint);
        paint.setColor(Color.BLUE);
        //sx,sy倾斜度：X轴方向上倾斜60度，tan60=根号3
        canvas.skew(1.73f, 0);
        canvas.drawRect(r, paint);

嗯，差不多就这样了

版权声明：个人原创，若转载，请注明出处

+GetTmBean