自定义View-画布变换

一. 前言

改变画布的性质，改变之后，任何的后续操作都会受到影响。

包括，平移，缩放，旋转，错切。

二. 平移

1. 作用

移动画布（实际上是移动坐标系）

2. 具体使用

1
2
3

//将画布原点向右移200px，向下移100px
//注：位移是基于当前位置移动，而不是每次都是基于屏幕左上角的(0,0)点移动
canvas.translate(200, 100)

三. 缩放

1. 作用

放大 / 缩小画布的倍数。

2. 具体使用

//方法1
//以(px,py)为中心，在x方向缩放sx倍，在y方向缩放sy倍，缩放中心默认为（0,0）
public final void scale(float sx, float sy)     

//方法2
//比方法1多了两个参数（px,py），用于控制缩放中心位置，缩放中心为（px,py）
public final void scale (float sx, float sy, float px, float py)

//实例：画两个对比图
//相同：都有两个矩形，第1个 = 正常大小，第2个 = 放大1.5倍 
//不同点：第1个缩放中心在（0，0），第2个在（px,py）

//第一个图
//设置矩形大小
RectF rect = new RectF(0,-200,200,0);
//绘制矩形(蓝色)
canvas.drawRect(rect, mPaint1);
//将画布放大到1.5倍
//不移动缩放中心，即缩放中心默认为（0，0）
canvas.scale(1.5f, 1.5f);
//绘制放大1.5倍后的蓝色矩形(红色)
canvas.drawRect(rect,mPaint2);

//第二个图      
//设置矩形大小
RectF rect = new RectF(0,-200,200,0);   
//绘制矩形(蓝色)
canvas.drawRect(rect, mPaint1);
//将画布放大到1.5倍,并将缩放中心移动到(100,0)
canvas.scale(1.5f, 1.5f, 100,0);              
//绘制放大1.5倍后的蓝色矩形(红色)
canvas.drawRect(rect,mPaint2);
       
//缩放的本质是：把形状先画到画布，然后再缩小/放大。所以当放大倍数很大时，会有明显锯齿

3. 注意

当缩放倍数为负数时，会先进行缩放，然后根据不同情况进行图形翻转，设缩放倍数为（a,b），旋转中心为（px，py）。

① a<0，b>0：以px为轴翻转

② a>0，b<0：以py为轴翻转

③ a<0，b<0：以旋转中心翻转

四. 旋转

1. 作用

角度增加方向为顺时针（区别于数学坐标系，角度方向参考绘制弧度时候的起始角度图）

2. 具体使用

//方法1
//以原点(0,0)为中心旋转 degrees 度
public final void rotate(float degrees)  
//以原点(0,0)为中心旋转 90 度
canvas.rotate(90);

//方法2
//以(px,py)点为中心旋转degrees度
public final void rotate(float degrees, float px, float py)  
//以(30,50)为中心旋转 90 度
canvas.rotate(90,30,50);

五. 错切

1. 作用

将画布在x方向倾斜a角度、在y方向倾斜b角度。

2. 具体使用

//参数 sx = tan a ，sx>0时表示向X正方向倾斜（即向左）
//参数 sy = tan b ，sy>0时表示向Y正方向倾斜（即向下）
public void skew(float sx, float sy)   


//实例
//为了方便观察,我将坐标系移到屏幕中央
canvas.translate(300, 500);
//初始矩形
canvas.drawRect(20, 20, 400, 200, mPaint2);
//向X正方向倾斜45度
canvas.skew(1f, 0);
canvas.drawRect(20, 20, 400, 200, mPaint1);
//向X负方向倾斜45度
canvas.skew(-1f, 0);
canvas.drawRect(20, 20, 400, 200, mPaint1);
//向Y正方向倾斜45度
canvas.skew(0, 1f);
canvas.drawRect(20, 20, 400, 200, mPaint1);
//向Y负方向倾斜45度
canvas.skew(0, -1f);
canvas.drawRect(20, 20, 400, 200, mPaint1);