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

理论上 Canvas 这张纸是没有边界的，但是我们的手机屏幕是有界的。我们可以理解为我们透过一个方形的洞（手机屏幕）看一张巨画（Canvas）。

而这里我们就又存在一个问题了，因为刚才的移动，我们是移动的原点，也就是说我们的画布是静止不动的，只是落笔点一直在变动，这就导致我们绘制的图对于用户来说是看不全的，所以我们需要进行移动 方形的洞 来查看这幅画。

举个例子，我们要查看最开始所说的画，可以通过移动 Screen框来查看这幅画，而这里又出现了一个坐标系，这一坐标系则为 视图坐标系，通过 scrollerTo 和 scrollerBy 进行移动该Screen框，正数则往正半轴，负数则往负半轴。

3、小结

自定义控件中存在两个坐标系需要明确，用一句话总结如下：

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

三、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);

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

效果图