Android高级UI --- canvas

前言

我们先来聊聊，在我们生活中如何绘制一张如下的图。

我们需要两样东西来绘制：

1. 一张纸（Android 中的 canvas）：用来承载我们绘制的内容。
2. 一支笔（Android 中的 paint）：负责绘制内容的轨迹。

有了这两样，我们就能在现实的场景中开始绘制了。

1、绘图坐标系

在 Android 的体系中，我们所谓的 “笔Paint” 和 “纸Canvas” 都是由App持有的，所以我们在绘制时就出现一个问题：我们怎么“告诉”App，确定我们想要绘制图形的落笔点？当然需要一个坐标系来进行交流。

这个 坐标系 便是我们经常所说的 绘图坐标系。初始状态下，Canvas的左上角为原点，此时我们想画图中的红点，就非常的容易，只需要“告诉” App 在坐标（200,500）处画一个红点，这就达到了画图的效果了。所以我们可以明确的一点是 我们所有的画图坐标都是根据原点进行确定。

所以我们可以移动原点，达到整体坐标点的移动，例如还是画刚才的红点，我们可以先将原点水平移动100，垂直移动400。然后在进行绘制，这时红点的坐标就变为（100,100），具体如下图所示。

经过上面的简单讲述，我们可以知道，绘图过程中，我们的绘图坐标永远是跟随当前的原点，而画布的原点可以进行移动。

2、视图坐标系

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

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

可以通过移动 Screen框来查看这幅画，而这里又出现了一个坐标系，这一坐标系则为 视图坐标系，通过 scrollerTo 和 scrollerBy 进行移动该Screen框，正数则往正半轴，负数则往负半轴。

3、小结

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

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

===================================================&#