cocos制作水滴粘连效果

工作需求，要做个水滴粘连的效果。

实际运用的知识：
1.两点形成的直线和坐标系的角度
2.求圆上点的坐标（知道角度，半径）
3.向量旋转
4.坐标系转换

实现思路，运用cocos的绘图系统，画直线和画贝塞尔曲线两个方法，组成的一个形状，作为两个圆之间的填充部分。

需要的求得信息：

1. 圆上的两点
   备注：圆上的两点需要做的是一个张开角度上的两点，这个角度随意，所以公式是必须的，因为角度不对的话会导致实际绘制的过程中看起来图形和圆连接不自然。
2. 贝塞尔曲线的顶点

有帮助的博客：
https://blog.csdn.net/u013040887/article/details/82964772
https://blog.csdn.net/Chouglas/article/details/50967566
上面这个博客就很好地展示了图形和圆连接不自然的问题
https://blog.csdn.net/chelen_jak/article/details/80518973

因工作嘛，我就只放核心计算的代码了，其他自己处理吧，就不是太难了。

po (r,nodeAngle,openAngle,x,y,cooAngle) {
        let x1 = 0;
        let x2 = 0;
        let y1 = 0;
        let y2 = 0;
        let angle1 = cooAngle - openAngle/2;
        let angle2 = cooAngle + openAngle/2;
        if(nodeAngle<90||nodeAngle>=0){
            x1 = x+r*Math.cos(angle1*Math.PI/180);
            y1 = y+r*Math.sin(angle1*Math.PI/180);
            x2 = x+r*Math.cos(angle2*Math.PI/180);
            y2 = y+r*Math.sin(angle2*Math.PI/180);
        }
        else if(nodeAngle>=90){
            x1 = x-r*Math.cos(angle1*Math.PI/180);
            y1 = y+r*Math.sin(angle1*Math.PI/180);
            x2 = x-r*Math.cos(angle2*Math.PI/180);
            y2 = y+r*Math.sin(angle2*Math.PI/180);
        }
        else if(nodeAngle<0||nodeAngle>=-90){
            x1 = x+r*Math.cos(angle1*Math.PI/180);
            y1 = y-r*Math.sin(angle1*Math.PI/180);
            x2 = x+r*Math.cos(angle2*Math.PI/180);
            y2 = y-r*Math.sin(angle2*Math.PI/180);
        }
        else if(nodeAngle<-90){
            x1 = x-r*Math.cos(angle1*Math.PI/180);
            y1 = y-r*Math.sin(angle1*Math.PI/180);
            x2 = x-r*Math.cos(angle2*Math.PI/180);
            y2 = y-r*Math.sin(angle2*Math.PI/180);
        }
        return[{x1,y1},{x2,y2}]
    }

解释一下参数：r就是半径，nodeAngle就是被计算的节点的旋转。openAngle就是圆上开角的角度，xy坐标，cooAngle就是两点形成的直线和坐标系的夹角。
这个函数就是求圆上的坐标的，集成了很多，并且不怕节点本身的旋转，还是可以得出正确的坐标。

besselPoint(scale,reduced,angle,x,y){
        let reRoX = 0;
        let reRoY = scale*reduced;
        let v1 = cc.v2(reRoX,reRoY);
        let a = (Math.PI/180)*angle
        let v2 = v1.rotate(a);
        let v3 = cc.v2(x,y);
        v3.add(v2);
        return v3.add(v2);
    },

这个就是用来求贝塞尔顶点的函数，这里需要注意的是，向量的rotate函数传入的参数是弧度，并不是角度，需要注意。
还有xy值，这个xy值并不是圆的坐标值，而是两个圆中间点的坐标，

这是一个技术贴，但是我不能所有的代码都贴上，实现思路上按照上面贴的博客上一张图(如下)，关键点就是贝塞尔顶点的获取，是依靠两个圆的圆心获取到的中间点，而贝塞尔顶点就在垂直于两个圆心所连的直线上（中间点也在上面）。依靠比例的长度还有向量的角度求得向量的坐标。

最后感谢我的学霸女朋友，前几个否定的技术方案需要用的三角函数都是她给我讲的~~?