【算法分析】QQ“一键退朝”之详细计算方法

相信很多朋友和我一样很喜欢QQ上“一键退朝”的功能，就是把红点从它原本的地方拉走，消息提醒也就没有了。

直到如今我还是觉得这个功能很酷炫！于是想自己实现一番，经过一番调查知道拉伸其实就是由两个圆加上两条贝塞尔曲线组成的形状。

来看看腾讯设计师是怎么设计出来的吧：《QQ手机版 5.0“一键下班”设计小结》

看完了这个对实现思路有很大的帮助，可是我还是不能知道具体是怎么计算实现的，网上大部分的教程都是假想成了两个同样大小的圆来计算，这太取巧了！因为同样大小的圆两条外公切线是平行的，同一个圆上的公切点相连是会垂直于连心线的，但是大小不同的圆并没有这个特殊性！

另外网上也有很多仿照的项目，可是看算法看得头都大了也不明白为什么是这样算的！经过两天的研究，把初中数学（圆、三角函数等相关知识）好好复习了一遍，终于搞清楚了其中算法，现在跟我一起来看看吧！

---

1.得到连心线

通过观察可以发现，在“一键退朝”这个功能当中，有一个小圆固定在原来坐标位置不动的，只是半径会发生变化，另一个大圆是跟随着我们手指滑动到屏幕的位置来确定圆心坐标的，一般大圆的半径是固定的。

建立两圆的相对坐标系：

PS：在移动端的坐标系 $y$ 轴是向下的。

假设某一个时刻，两圆的状态如图，我们现在可以确定的是小圆的圆心坐标 $O$ 为（$startX$， $startY$），大圆的圆心坐标 $P_{0}$ 为 （$x_{0}$, $y_{0}$），以及小圆的半径 $r$ 和大圆的半径 $R$ 。

那么首先可以把连心线求出来！也就是 $OP_{0}$ 的距离。

$$连心线的长度：d = \sqrt{ (x_{0} - startX)^{2}+ (y_{0} - startY)^{2}}$$

2.求切点坐标

复习一下初中数学：

两个外离的圆，一定有两条外公切线。若两圆半径相同，则两外公切线平行；否则相交于一点，且该点与两圆心在同一直线。

我们再作一张有公切线的图：

切点为 $P_{1}、P_{2}、P_{3}、P_{4}$，我们现在目的就要求出这四个点，然后就能够在程序中画出切线。

整个算法最难的地方恐怕就是求这四个点了，我们需要借助作图来帮助计算，这之前还需要先复习下定理：

圆心和切点的连线一定垂直于过该点的公切线

首先过小圆圆心 $O$ 作一条平行于 $P_{1}P_{2}$ 的线，和 $P_{0}P_{2}$ 相交于点 $M$ ，可以得到 $P_{1}OMP_{2}$ 为一个矩形，则 $P_{2}M = P_{1}O = r$ ，又因为 P2P