
3.4.1 画布的绘图层次
画布Canvas上的绘图操作都是在同一个图层上进行的,这意味着如果存在重叠区域,后面绘制的图形就必然覆盖前面的图形。绘图是比较复杂的事情,不是直接覆盖这么简单,有些特殊的绘图操作往往需要做与、或、非运算,如此才能实现百变的图像特效。
Android给画布的图层显示制定了许多规则,详细的图层显示规则见表3-6。表中的上层指的是后绘制的图形Src,下层指的是先绘制的图形Dst。
表3-6 图层模式的取值说明

这些图层规则的文案有点令人费解,还是看画面效果比较直观。在图3-30中,圆圈是先绘制的下层图形,正方形是后绘制的上层图形,图例展示了运用不同规则时的显示画面。

图3-30 各种图层规则的画面效果
具体到编码而言,需要在当前画布之外再准备一个遮罩画布,遮罩画布绘制上层图形,而当前画布绘制下层图形。同时指定两个画布的混合图层模式,并根据该模式在当前画布盖上遮罩画布。为此自定义演示用的图层视图示例代码如下:
(完整代码见animation\src\main\java\com\example\animation\widget\LayerView.java)

然后在布局文件中添加LayerView节点,并在对应的活动页面调用setMode方法设置绘图模式。运行并测试该App,可观察到图层覆盖效果如图3-31~图3-36所示。图3-31为只显示轮廓的画面,图3-32为SRC_OVER模式的画面,图3-33为DST_OVER模式的画面,图3-34为SRC_OUT模式的画面,图3-35为DST_OUT模式的画面,图3-36为XOR模式的画面,这些画面效果都能跟表3-6对得上。

图3-31 只显示轮廓的画面

图3-32 SRC_OVER模式的画面

图3-33 DST_OVER模式的画面

图3-34 SRC_OUT模式的画面

图3-35 DST_OUT模式的画面

图3-36 XOR模式的画面