Canvas 中的裁剪师讲解与实战——Android 高级 UI，三面蚂蚁金服成功拿到 offer

2021 年 11 月 27 日
本文字数：2606 字
阅读完需：约 9 分钟

效果图

此类型的方法还有以下这几个，但他们的裁剪范围均为矩形

public boolean clipRect(float left, float top, float right, float bottom)public boolean clipRect(int left, int top, int right, int bottom)public boolean clipRect(@NonNull Rect rect)public boolean clipRect(@NonNull RectF rect)

2、clipOutPath

public boolean clipOutPath(@NonNull Path path)

描述： 只留下 path 外 的画布区域，而处于 path 范围之内的则不显示。（与 clipPath 的作用范围正好相反）

值得注意的是，该方法只能在 API26 版本以上调用。 低版本我们使用下一小节介绍的方法

举个例子：

我们先准备好一个心形的路径 Path，然后调用 clipOutPath 从画布中将此路径之外的区域 “裁剪” 下来，最后为了我们观察，使用 drawColor “染”上酒红色。

// 第一步：创建心形路径 mPath....省略，具体请移步 github

// 第二步：从画布 canvas 裁剪下心形路径之外的区域 canvas.clipOutPath(mPath);

// 第三步：涂酒红色 canvas.drawColor(mBgColor);

效果图

此类型的方法还有以下这几个，但他们的裁剪范围均为矩形

public boolean clipOutRect(float left, float top, float right, float bottom)public boolean clipOutRect(int left, int top, int right, int bottom)public boolean clipOutRect(@NonNull Rect rect)public boolean clipOutRect(@NonNull RectF rect)

3、clipPath

public boolean clipPath(@NonNull Path path, @NonNull Region.Op op)

描述： 在画布上进行使用 path 路径进行操作，至于其作用由 op 决定。

描述比较抽象，我们通过例子来体会。但在上例子前，我们需要先了解下 Region.Op 这个枚举类型，具体内容代码如下

public enum Op {// A: 为我们先裁剪的路径// B: 为我们后裁剪的路径

// A 形状中不同于 B 的部分显示出来 DIFFERENCE(0),// A 和 B 交集的形状 INTERSECT(1),// A 和 B 的全集 UNION(2),// A 和 B 的全集形状，去除交集形状之后的部分 XOR(3),// B 形状中不同于 A 的部分显示出来 REVERSE_DIFFERENCE(4),// 只显示 B 的形状 REPLACE(5);

// ...省略不相关代码}

通过源码可以知道共有六种类型。值得一提的有以下两点：

1）clipOutPath 方法中使用的类型就是 DIFFERENCE，换而言之，我们可以使用以下代码代替，解决在 API26 以下无法使用的问题clipOutPath 方法的问题

clipPath(mPath, Region.Op.DIFFERENCE)

2）clipPath 方法中使用的类型就是 INTERSECT，换而言之，我们可以使用以下代码代替

clipPath(mPath, Region.Op.INTERSECT)

举些例子：

接下来我们一个个讲解这六种类型，两次裁剪比较能体现出 Region.Op 参数的作用，所以我们接下来的例子需要使用两个路径:

1、心形路径 （下列例子中的 A）

2、圆路径（下列例子中的 B）

（1）DIFFERENCE

描述： A 形状中不同于 B 的部分显示出来

效果图： 红色即为最终裁剪留下区域

（2）INTERSECT

描述： A 和 B 交集的形状

效果图： 红色即为最终裁剪留下区域

（3）UNION

描述： A 和 B 的全集

效果图： 红色即为最终裁剪留下区域

（4）XOR

描述： A 和 B 的全集形状，去除交集形状之后的部分

效果图： 红色即为最终裁剪留下区域

（5）REVERSE_DIFFERENCE

描述： B 形状中不同于 A 的部分显示出来

效果图： 红色即为最终裁剪留下区域

（6）REPLACE

描述： 只显示 B 的形状

效果图： 红色即为最终裁剪留下区域

此类型的方法还有以下这几个，但他们的 裁剪范围均为矩形

public boolean clipRect(float left, float top, float right, float bottom,@NonNull Region.Op op)public boolean clipRect(@NonNull Rect rect, @NonNull Region.Op op)public boolean clipRect(@NonNull RectF rect, @NonNull Region.Op op)

四、实战

上一小节我们已经了解了这几些 API 的作用就是裁剪，这小节我们就把它使用起来。

老夫的少女心

效果图

Github 入口：传送门

编码思路

我们借助下面这张小盆友手绘的思路图（看看能不能达到一图胜千言??）

这里为了视觉效果易于讲解，红色即为我们 demo 中的粉色，蓝色即为我们 demo 中青色，橘色就是最终的渐变色

第一步（绿色心形部分）： 我们先在画布裁剪下心形区域，这就奠定了最后呈现给用户所看到的画布区域为一个“心”。

第二步（红色部分）： 我们用将画布染成红色，然后在画布的中心用蓝色写上 “猛猛的小盆友” ，最后使用图中红色框（即上边是横线，下边是用贝塞尔曲线绘制的 Path 红色区域）将画布的上半部分裁剪下来，放置最终呈现的画布中。

第三步（蓝色部分）： 与第二步正好相反，我们用将画布染成蓝色，然后在画布的中心用红色写上 “猛猛的小

《Android 学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】完整内容开源分享

盆友” ，最后使用图中蓝色框（即上边是用贝塞尔曲线绘制，下边是横线的 Path 懒色区域）将画布的下半部分裁剪下来，放置最终呈现的画布中。

第四步： 经过前三步，我们的图案已经形成了右边的图像。我们开启动画，其实就是控制中间贝塞尔曲线的 y 轴坐标，令其从底部上升至顶部，则呈现出了灌满心形的动画效果，所以我们可以通过让画布偏移一定的值达到该效果，同时让贝塞尔曲线做水平的运动，有一种波动感。

核心代码

// 第一步 canvas.clipPath(mHeartPath);

// ======== 第二步 start ==============canvas.save();

// 第四步 canvas.translate(-mCurOffset, mCurPos);

canvas.clipPath(mTopPath);mPaint.setColor(mTopBgColor);mPaint.setStyle(Paint.Style.FILL);canvas.drawPath(mTopPath, mPaint);

canvas.translate(mCurOffset, -mCurPos);drawText(canvas, mBottomBgColor);canvas.restore();// ======== 第二步 end ==============

// ======== 第三步 start ==============canvas.save();

// 第四步 canvas.translate(-mCurOffset, mCurPos);

canvas.clipPath(mBottomPath);mPaint.setColor(ContextCompat.getColor(getContext(), R.color.canvas_light_blue_color));mPaint.setStyle(Paint.Style.FILL);canvas.drawPath(mBottomPath, mPaint);