cocos制作水滴粘连效果

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

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

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

需要的求得信息：

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

有帮助的博客：
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)*anglelet v2 = v1.rotate(a);let v3 = cc.v2(x,y);v3.add(v2);return v3.add(v2);},

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

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

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

cocos制作水滴粘连效果相关推荐

Excel制作水滴图和对称条形图
关注公众号,设为"置顶或标星",第一时间送达干货 Excel2016制作水滴图 1.数据准备:2020年某门店销售额目标达成率和目标值,以及填充图表的空心圆和实心圆. 2.选中目标 ...
PhotoShop制作水滴魔幻特效(转)
PhotoShop制作水滴魔幻特效 PhotoShop制作水滴魔幻特效昨天更新了Title,顺路些个教程上来说说一些体会.想做的是个类似蜕变的壳或者蛹一样的物体,但又不想太呆板的形状和颜色,因 ...
纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
Unreal Engine 4 RenderTarget制作Live Camera效果
Unreal Engine 4 RenderTarget制作Live Camera效果先上效果: Live Camera我不知道怎么翻译.反正意思就是将一个摄影机的Image渲染到一个2D平面上. ...
ps怎么制作流体_PS教程：制作渐变流体效果海报
相信大家都看到过一些很酷的使用渐变流体的海报,此类海报一般都充满活力,而且色彩的饱和度都很高,因为这样更能让作品脱颖而出. 看到这些非常有立体感的渐变色彩,大家可能以为只有用很复杂的三维软件才能够做出 ...
html 字幕飘动效果,html 滚动字幕制作滚动字幕效果参数
制作滚动字幕效果:marquee标签如下:<MARQUEE direction=up height=146 οnmοuseοut=start() οnmοuseοver=stop() scro ...
jQuery制作动态酷效果总结
jQuery是一个优秀的JavaScript框架,可以很好的解决不同浏览器兼容的问题,尤其是在ASP.NET MVC下,它的作用更加的凸显. jQuery在制作动态酷效果的时候有很强的优势,以下是笔者 ...
滤镜应用——制作车辆行驶效果
滤镜应用--制作车辆行驶效果原图: 效果图: 步骤: 1.先用"钢笔工具"抠出车的轮廓,选择"路径面板",按"Ctrl+回车",将路径转为 ...

cocos制作水滴粘连效果

cocos制作水滴粘连效果相关推荐

最新文章

热门文章