8.3.16 Canvas API详解(Part 1)

本节引言：

1.translate(平移)

使用示例：

for(int i=0; i < 5; i++) {
    canvas.drawCircle(50, 50, 50, mPaint);
    canvas.translate(100, 100);
}

运行效果：

8.3.16 Canvas API详解(Part 1)

2.rotate(旋转)

使用示例：

Rect rect = new Rect(50,0,150,50);
canvas.translate(200, 200);
for(int i = 0; i < 36;i++){
    canvas.rotate(10);
    canvas.drawRect(rect, mPaint);
}

运行效果：

8.3.16 Canvas API详解(Part 1)

代码分析：

这里我们先调用了translate(200，200)将canvas的坐标原点移向了(200,200)，再进行绘制，所以我们绘制的结果可以完整的在画布上显示出来，假如我们是为rotate设置了(10,200,200)，会是这样一个结果：

8.3.16 Canvas API详解(Part 1)

有疑问是吧，这个涉及到Canvas多图层的概念，等等会讲~

3.scale(缩放)

使用示例：

canvas.drawBitmap(bmp,0,0,mPaint);
canvas.scale(0.8f, 0.8f);
canvas.drawBitmap(bmp, 0, 0, mPaint);
canvas.scale(0.8f, 0.8f);
canvas.drawBitmap(bmp,0,0,mPaint);

运行效果：

8.3.16 Canvas API详解(Part 1)

4.skew(倾斜)

使用示例：

canvas.drawBitmap(bmp,0,0,mPaint);
canvas.translate(200, 200);
canvas.skew(0.2f,-0.8f);
canvas.drawBitmap(bmp,0,0,mPaint);

运行效果：

8.3.16 Canvas API详解(Part 1)

5.Canvas图层的概念以及save()和restore()详解

写个例子：

例子代码：

canvas.save();  //保存当前canvas的状态

canvas.translate(100, 100);
canvas.drawCircle(50, 50, 50, mPaint);

canvas.restore();  //恢复保存的Canvas的状态
canvas.drawCircle(50, 50, 50, mPaint);

运行结果：

不用说什么了吧，代码和结果已经说明了一切，接着我们搞得复杂点，来一发多个save()和restore()！

例子代码：

canvas.save();

canvas.translate(300, 300);
canvas.drawBitmap(bmp, 0, 0, mPaint);
canvas.save();

canvas.rotate(45);
canvas.drawBitmap(bmp, 0, 0, mPaint);
canvas.save();

canvas.rotate(45);
canvas.drawBitmap(bmp, 0, 0, mPaint);
canvas.save();

canvas.translate(0, 200);
canvas.drawBitmap(bmp, 0, 0, mPaint);

运行结果：

8.3.16 Canvas API详解(Part 1)

结果分析：

首先平移(300,300)画图，然后旋转45度画图，再接着旋转45度画图，接着平移(0,200)，期间每次画图前都save()一下，看到这里你可能有个疑问，最后这个平移不是y移动200 么，怎么变成向左了？嘿嘿，我会告诉你rotate()旋转的是整个坐标轴么？坐标轴的变化：

8.3.16 Canvas API详解(Part 1)

嗯，rotate()弄懂了是吧，那就行，接着我们来试试restore咯~我们在最后绘图的前面加两个restore()！

canvas.restore();
canvas.restore();
canvas.translate(0, 200);
canvas.drawBitmap(bmp, 0, 0, mPaint);

运行结果：

8.3.16 Canvas API详解(Part 1)

不说什么，自己体会，再加多个restore()！

8.3.16 Canvas API详解(Part 1)

有点意思，再来，继续加restore()

8.3.16 Canvas API详解(Part 1)

嗯，好像不可以再写restore了是吧，因为我们只save了四次，按照网上的说法，这会报错的，真的是这样吗？这里我们调用Canvas给我们提供的一个获得当前栈中有多少个Layer的方法：getSaveCount()；然后在save()和restore()的前后都加一个Log将栈中Layer的层数打印出来：

8.3.16 Canvas API详解(Part 1)

结果真是喜闻乐见，毕竟实践出真知，可能是Canvas改过吧，或者其他原因，这里要看源码才知道了，时间关系，这里我们知道下restore的次数可以比save多就好了，但是还是建议restore的次数还是少于save，以避免造成不必要的问题~ 至于进栈和出栈的流程我就不话了，笔者自己动笔画画，非常容易理解！

6.saveLayer()与restoreToCount()讲解

标记	说明
ALL_SAVE_FLAG	保存全部的状态
CLIP_SAVE_FLAG	保存裁剪的某个区域的状态
CLIP_TO_LAYER_SAVE_FLAG	保存预先设置的范围里的状态
FULL_COLOR_LAYER_SAVE_FLAG	保存彩色涂层
HAS_ALPHA_LAYER_SAVE_FLAG	不透明图层保存
MATRIX_SAVE_FLAG	Matrix信息(translate，rotate，scale，skew)的状态保存

PS:上述说明有点问题，笔者英语水平低，可能说错，如果有知道的，请务必指正提出，谢谢~

这里我们写个例子来验证下：我们选用CLIP_TO_LAYER_SAVE_FLAG模式来写个例子

实现代码：

RectF bounds = new RectF(0, 0, 400, 400);
canvas.saveLayer(bounds, mPaint, Canvas.CLIP_TO_LAYER_SAVE_FLAG);
canvas.drawColor(getResources().getColor(R.color.moss_tide));
canvas.drawBitmap(bmp, 200, 200, mPaint);
canvas.restoreToCount(1);
canvas.drawBitmap(bmp, 300, 200, mPaint);

运行结果：

8.3.16 Canvas API详解(Part 1)