八、自定义View之使用贝塞尔曲线绘制可拖拽小红点

该项目属于继承自View的自定义控件。

效果图如下：

---

1.静态绘制粘性控件

粘性控件由两个点和中间的贝塞尔曲线组成。效果图如下：

静态绘制可拖拽小圆点

分析图如下：

静态绘制粘性控件分析图

总体来说：粘性控件两个小圆点之间的区域使用贝塞尔曲线绘制，贝塞尔曲线有三个点，起始点，终点和控制点。第一条贝塞尔曲线起始点为固定圆的上半圆弧水平切点，第二条贝塞尔曲线的起始点为固定圆下半圆弧水平方向的切点。两条贝塞尔曲线的终点和控制点起始状态的位置如图所示。终点为拖拽圆上下半圆弧水平方向的切点，控制点是圆心连线的中点。后面动态绘制时，两条贝塞尔曲线的终点和控制点是随着拖拽圆的移动而改变的，这是后话。

1）在onDraw()中绘制两个小圆点：

绘制两个圆

2） 绘制贝塞尔曲线，使用Path类

首先确定贝塞尔曲线的起始点，终点坐标。如下图分析所示：

贝塞尔曲线起始位置点坐标分析

分别获得了两条贝塞尔曲线三个点的坐标，首先把起点，终点封装起来，避免用错。

开始绘制贝塞尔曲线，使用Path类，具体用法代码中已注释

其中需要注意的是，贝塞尔曲线是一个闭合的曲线，如果只有两个点，它会自动连接起点和终点，因此我们画第二条贝塞尔曲线时，直接把第二条的终点和第一条的终点连接起来，将4个点逆时针连接，lineTo（x,y）是画连线的意思，将曲线终点连接到(x,y) moveTo(x,y)是直接跳到(x,y)

此时，静态的拖拽小圆点已经绘制完成，明天更新动态拖拽小红点的内容。

2、绘制动态拖拽小红点

原理：根据手指在屏幕上的触摸点和MOVE事件，更改drag圆的圆心坐标，根据圆心坐标和斜率求出绘制贝塞尔曲线需要的5个点。需要注意的是，在拖拽的过程中，这5个点是一直随着dragCenter的变化而变化的。

如图所示：

如图所示：5个点分别是

1.controlPoint控制点  2.stickyPointp[0],dragPoint[0]第一条贝塞尔曲线的起点和终点。3.dragPoint[1],stickyPoint[1] 第二条贝塞尔曲线的起点和终点。

那么怎么样求出这5个点呢？ 一步步来

1、 controlPoint 两圆圆心连线的黄金分割点。根据两圆圆心坐标和比例0.618求出该点坐标

2.求出斜率

3.根据斜率求出4个点

代码如下：

根据dragCenter的改变，动态求出5个点之后，就可以动态的绘制贝塞尔曲线，我们需要在onTouchEvent中，把Down 和Move 事件下获得手指移动的坐标，作为dragCenter的坐标，并且每次进行onToucheEvent时，都要对画面进行重绘。每次重绘都会更新点坐标，完成拖拽行为在屏幕上的实现。

onTouchEvent()代码的实现：

此时，效果如下：

可以看到，手指点到的位置，与dragCenter稍微有点偏移，这是因为获取的是点相对于屏幕的x，y坐标，而StatusBar 占了画布一点距离。因此，我们需要把画布整体往上偏移即可。

canvas.translate(0, -GeometryUtil.getStatusBarHeight(getResources()));

一些优化：（为什么每次传入值，屏幕上的值就可以动态的变化呢，这是因为在onTounchEvent

中调用了invalidate()重绘界面）

优化1.固定圆的半径随着两圆之间的距离变大，而不断的变小。到达一定的距离后就消失不见。

首先解决stickyRadius随着两圆之间的距离变大而不断变小。

代码如下：在onDraw()中，每次重绘界面都会改变stickyRadius值

然后解决，拖拽到一定程度时，中间连接的部分断掉，固定圆消失。

首先设置一个boolean isDragOut = true;

在onTouchEvent()中，拖拽的过程中，即MOVE事件中，判断两圆圆心的距离是否大于设定的最大值，这里是200，如果大，则将isDragOut = false；在onDraw()中 不再绘制贝塞尔曲线和固定圆部分，代码如下：

onDraw()中

优化2.手松开时拖拽圆的优化。

分几种情况

1.手松开时，已经拖拽出了最大范围，此时拖拽圆回去。

2.手松开时，没有拖拽出最大范围，此时拖拽圆以动画的形式弹回去

3.手松开时，没有拖拽出最大范围，但曾经拖拽出最大范围过，直接回去，不用动画的状态弹回去

代码如下

至此，自定义View暂时告一段落，等我把谷歌市场和华为市场两个项目写完，再继续更新一些比较难的自定义View的博客，参考Hencoder的公众号，做一些现在比较常用的自定义View。

今年的计划基本上是这样：

1.谷歌市场 2.华为市场 3.java数据结构和算法  java编程思想 学完了Android中的东西，就开始学习后端的知识