前言
根据Gcssloop所学习的自定义View整理与笔记。
还记得上一篇参考补充小节canvas的各种方法么？本章内容就是用来讲解cavas的各种方法的哦~
大大要点
所有的画布操作都只影响后续的绘制，对之前已经绘制过的内容没有影响
所有的画布操作都只影响后续的绘制，对之前已经绘制过的内容没有影
所有的画布操作都只影响后续的绘制，对之前已经绘制过的内容没有影响
切记切记，重要事情说三遍！！！
一、位移translate方法
首先看下面的代码
paint.setColor(Color.BLUE);
//位移
canvas.translate(200, 300);
//在坐标原点画一个蓝色的圆形
canvas.drawCircle(0,0,100,paint);
paint.setColor(Color.MAGENTA);
//位移
canvas.translate(200, 300);
//在坐标原点画一个粉红色的圆形
canvas.drawCircle(0,0,100,paint);
效果如下：
由此，我们可以看出来：
位移是基于当前位置移动，而不是每次基于屏幕左上角的(0,0)点移动,初始默认是屏幕左上角。
可以这样想，坐标轴控制绘画的位置，translate的时候，可以想象一个活动的坐标轴在移动。我们拿着坐标轴的中心点进行位置移动，每一次的移动都以上一次的坐标轴为参考物。
二、缩放scale方法
首先,看一下缩放方法:
//1
public void scale (float sx, float sy)；
//2
public final void scale(float sx, float sy, float px, float py) {
translate(px, py);
scale(sx, sy);
translate(-px, -py);
}
参数含义：
- sx: x轴的缩放比例，缩放中心默认坐标轴原点，缩放前的值*sx的绝对值=缩放后的值；如果sx<0,则再根据x轴进行翻转
- sy: y轴的缩放比例，缩放中心默认坐标轴原点，缩放前的值*sy的绝对值=缩放后的值；如果sy<0,则根据y轴进行翻转
- px,py: 设置缩放中心
首先要注意以下几点：
- cavas的操作效果是叠加的，即影响的该画布之后的所有组件！
- translate(px, py)移动的物理距离分别是px和py，经过scale(sx, sy)缩放后再通过translate(-px, -py)位移，移动的物理距离就是-px*sx和-py*sy。
看着觉得疑惑，不要担心，我们下边跟着代码会理解的哦O(∩_∩)O~
为了更好地理解，我们可以参考下边的demo：
先位移至一定位置，绘制蓝色方框，缩放后，绘制黑色方框
//位移，绘制蓝色，缩放后，绘制黑色方框
canvas.translate(200, 300);
paint.setColor(Color.BLUE);
canvas.drawRect(new RectF(0,0,30,30),paint);
paint.setColor(Color.BLACK);
canvas.scale(-0.5f,-1,100,0);
canvas.drawRect(new RectF(0,0,30,30),paint);
上边的代码可以用下边的代码代替，为了方便理解，我们每一个分解步骤，都绘制一个方框，一步步跟着代码走。
canvas.translate(200, 300);
paint.setColor(Color.BLUE);
canvas.drawRect(new RectF(0,0,30,30),paint);
canvas.translate(100,0);
paint.setColor(Color.MAGENTA);
canvas.drawRect(new RectF(0,0,30,30),paint);
canvas.scale(0.5f,1);
paint.setColor(Color.YELLOW);
canvas.drawRect(new RectF(0,0,30,30),paint);
canvas.scale(-1,-1);
paint.setColor(Color.GRAY);
canvas.drawRect(new RectF(0,0,30,30),paint);
canvas.translate(-100,0);
paint.setColor(Color.BLACK);
canvas.drawRect(new RectF(0,0,30,30),paint);
效果图如下
非分解
分解
可以看出，这两种代码的效果是一样的，
总之，我们可以这样理解，每一次的操作，我们都进行了一次画布的变动，这次的变动对于前边的绘制没有任何影响，但对后边的所有操作都有影响。
现在，我们在添加一些新代码和图理解一下
canvas.translate(200, 300);
paint.setColor(Color.BLUE);
canvas.drawRect(new RectF(0,0,30,30),paint);
paint.setColor(Color.BLACK);
canvas.scale(-0.5f,-1,100,0);
canvas.drawRect(new RectF(0,0,30,30),paint);
//新代码
paint.setColor(Color.RED);
canvas.translate(100,100);
canvas.drawRect(new RectF(0,0,30,30),paint);
效果：
三、旋转rotate
public void rotate (float degrees);
public final void rotate(float degrees, float px, float py) {
translate(px, py);
rotate(degrees);
translate(-px, -py);
}
- 默认旋转中心为原点,正值顺时针
canvas.translate(300, 300);
canvas.drawCircle(0,0,200,paint);
canvas.drawCircle(0,0,180,paint);
for (int i = 0; i <=360; i=i+10) {
canvas.drawLine(-200,0,-180,0,paint);
canvas.rotate(10);
}
四、错切skew
public void skew (float sx, float sy)
- float sx:将画布在x方向上倾斜相应的角度，sx倾斜角度的tan值
- float sy:将画布在y轴方向上倾斜相应的角度，sy为倾斜角度的tan值.
canvas.translate(300, 300);
paint.setColor(Color.GREEN);
canvas.drawRect(new RectF(0,0,100,100),paint);
paint.setColor(Color.BLACK);
canvas.skew(0.5f,0.5f);
canvas.drawRect(new RectF(0,0,100,100),paint);
paint.setColor(Color.RED);
canvas.skew(0.5f,0.5f);
canvas.drawRect(new RectF(0,0,100,100),paint);
五、保存和恢复画布状态
1. 保存save和恢复restore
-
Save()：每次调用Save()函数，都会把当前的画布的状态进行保存,即保存当前Canvas的状态，然后放入特定的栈中，这样之后，我们就可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作啦；
-
restore()：每当调用Restore()函数，就会把栈中最顶层的画布状态取出来，并按照这个状态恢复当前的画布，在这个画布上做画，也可以说，是用来恢复Canvas之前保存的状态，防止save后对Canvas执行的操作对后续的绘制有影响。
注意：save和restore要配对使用（restore可以比save少，但不能多），如果restore调用次数比save多，会引发Error。
canvas.drawColor(Color.RED);
//保存的画布大小为全屏幕大小
canvas.save();
//要在画图之前对canvas进行clip，如果画图之后再对canvas进行clip不会影响到已经画好的图形。一定要记住clip是针对canvas而非图形
canvas.clipRect(new Rect(0, 0, 400, 400));
canvas.drawColor(Color.GREEN);
//保存画布大小为Rect(0, 0, 500, 500)
canvas.save();
canvas.clipRect(new Rect(50, 50, 350, 350));
canvas.drawColor(Color.BLUE);
canvas.save();
canvas.clipRect(new Rect(100, 100, 300, 300));
canvas.drawColor(Color.YELLOW);
canvas.save();
canvas.clipRect(new Rect(150, 150, 250, 250));
canvas.drawColor(Color.MAGENTA);
效果图：
在上述代码下边加上如下代码
//将栈顶的画布状态取出来，作为当前画布，并画成黄色背景
canvas.restore(); //①
canvas.drawColor(Color.WHITE); //②
如果只添加①的话，显示效果没有变化的，添加①②的话，则效果如下：
补充：Clip系列函数如下：
boolean clipPath(Path path)
boolean clipPath(Path path, Region.Op op)
boolean clipRect(Rect rect, Region.Op op)
boolean clipRect(RectF rect, Region.Op op)
boolean clipRect(int left, int top, int right, int bottom)
boolean clipRect(float left, float top, float right, float bottom)
boolean clipRect(RectF rect)
boolean clipRect(float left, float top, float right, float bottom, Region.Op op)
boolean clipRect(Rect rect)
boolean clipRegion(Region region)
boolean clipRegion(Region region, Region.Op op)
后记
每一次的变动，可以理解为在改变画布的坐标轴👌
参考网址
感谢大家的批评指正~
网友评论