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