高级UI<第十七篇>：Canvas图层的概念（saveLayer

图层的概念的PhotoShop中比较常见，常常设计图标的时候当前图层的画布上只绘制背景，新增的图元习惯性的在新的图层中绘制。

下面我们演示一下Android之Canvas图层用法。

关键方法：

//新建图层
public int saveLayer(float left, float top, float right, float bottom, Paint paint, int saveFlags)
//切换到指定图层的上一级图层
public void restoreToCount(int saveCount) {
//获取图层数量
public int getSaveCount()

代码

private int measureWidth;//父布局宽度
private int measureHeight;//父布局高度
private int OFFSET = 100;//偏移量

mPaint = new Paint(Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG);
//设置画笔的颜色
mPaint.setColor(Color.RED);
//设置画笔的样式
mPaint.setStyle(Paint.Style.FILL);

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    measureWidth = MeasureSpec.getSize(widthMeasureSpec);
    measureHeight = MeasureSpec.getSize(heightMeasureSpec);

}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(Color.CYAN);
    int saveCount = canvas.saveLayer(OFFSET,OFFSET,measureWidth - OFFSET,measureHeight - OFFSET,mPaint, Canvas.ALL_SAVE_FLAG);
    canvas.drawColor(Color.parseColor("#f0ffcc"));
    int saveCount1 = canvas.saveLayer(OFFSET*2,OFFSET*2,measureWidth - OFFSET*2,measureHeight - OFFSET*2,mPaint, Canvas.ALL_SAVE_FLAG);
    canvas.drawColor(Color.parseColor("#f0cccc"));
    canvas.drawCircle(300, 300, 300, mPaint);
}

效果如下

图片.png

代码中我们创建了两个图册，图层的角标分别是0,1，也就是说saveCount=1，saveCount1=2；
最终的圆是在角标为2的图层上绘制。

我们通过getSaveCount()获取图层数量，发现有三个图层，角标为0的图层其实就是view本身。

其绘制的步骤是：
（1）将角标为0的图层的背景色设置成青色；
（2）新建并切换到角标为1的图层，设置白色背景色；
（3）新建并切换到角标为2的图层，设置粉色背景色；
（4）绘制红色实心圆。

演示目标（1）：

切换画布到上一层，再切换到最顶层，画圆之后查看效果。

    canvas.drawColor(Color.CYAN);
    int saveCount = canvas.saveLayer(OFFSET,OFFSET,measureWidth - OFFSET,measureHeight - OFFSET,mPaint, Canvas.ALL_SAVE_FLAG);
    canvas.drawColor(Color.parseColor("#f0ffcc"));
    int saveCount1 = canvas.saveLayer(OFFSET*2,OFFSET*2,measureWidth - OFFSET*2,measureHeight - OFFSET*2,mPaint, Canvas.ALL_SAVE_FLAG);
    canvas.drawColor(Color.parseColor("#f0cccc"));
    canvas.restoreToCount(saveCount1);
    canvas.restoreToCount(10);
    canvas.drawCircle(300, 300, 300, mPaint);

效果如下

图片.png

现象：
（1）假设图层数量为A，当restoreToCount传递的数值大于A-1时，默认切换至最顶层图层；
（2）当执行restoreToCount方法时，没有发生合并图层。

演示目标（2）：

切换画布到上一层，画圆，再切换到最顶层，再画圆，查看效果。

代码

    canvas.drawColor(Color.CYAN);
    int saveCount = canvas.saveLayer(OFFSET,OFFSET,measureWidth - OFFSET,measureHeight - OFFSET,mPaint, Canvas.ALL_SAVE_FLAG);
    canvas.drawColor(Color.parseColor("#f0ffcc"));
    int saveCount1 = canvas.saveLayer(OFFSET*2,OFFSET*2,measureWidth - OFFSET*2,measureHeight - OFFSET*2,mPaint, Canvas.ALL_SAVE_FLAG);
    canvas.drawColor(Color.parseColor("#f0cccc"));
    canvas.restoreToCount(saveCount1);
    canvas.drawCircle(300, 300, 300, mPaint);
    canvas.restoreToCount(10);
    mPaint.setColor(Color.BLUE);
    canvas.drawCircle(300, 300, 250, mPaint);

效果如下

图片.png

现象：
当切换至上一图层，在当前图层绘制圆时，当前图层一直到最上图层发生了图层合并现象。

演示目标（3）：

切换画布到上一层，移动画布，再切换到最顶层，再移动画布，查看效果。
此时发现效果和（2）一样。

总结：
（1）图层的应用主要是方便于图像合成；
（2）当操作画布的时候，将会自动合成当前图层和以上的图层；

[本章完...]