Canvas中的裁剪师讲解与实战——Android高级UI

作者：IT小白 | 2024-05-14 00:06:29

踩

绘图坐标系：决定我们的绘制的坐标
视图坐标系：决定我们所看到的画布范围

三、Canvas的剪刀手API

Canvas 中以 clip开头 的公有方法，用于裁剪画布的内容。我们抽取比较好玩的参数类型为Path的方法来分享，其余的都可以一一映射进来。

1、clipPath

public boolean clipPath(@NonNull Path path)

描述： 只留下 path内 的画布区域，而处于path范围之外的则不显示。

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

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

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

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

如果想了解如何绘制心形轨迹，请移步小盆友的另一篇博文：自带美感的贝塞尔曲线原理与实战

效果图 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传此类型的方法还有以下这几个，但他们的裁剪范围均为矩形

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）