想实现一个椭圆形的进度条走动时头部有个光点跟随着,进度条走动没问题了,关键是这个光点怎么计算跟随位置,没什么思路,有没哪位做过的提供下思路?
填充可以试试?
把轨迹函数先写出来,然后光点按照轨迹移动就行了,底图用radial filled设置就行
用几段贝赛尔曲线拟合就行了。
进度条已经用了填充,但光点没法根据填充移动
有点迷茫,示意图中没看到椭圆啊
我没有实现椭圆进度条,只计算了当前进度与总距离的位置关系,仅供参考
感谢老哥,感觉很接近了,我试着看能否改成我想要的效果
比较笨的方法,直接硬算。
半圆的地方,按角度线性对应,radial filled在这里应该不是匀速的,不过半圆比较小,应该看不出破绽来。
上下的直线,使用求交点的方式。lineLine从cocos的函数修改而来,判断条件只使用0 <= ua,避免返回null。这里应该是可以跟radial filled完全对应上的。
参考楼下的链接,直线部分可以直接用三角函数计算出来,不需要求交点。
function getPosition(m, n, progress) {
let a = Math.atan2(n, m);
let angle = Math.PI * 2 * progress;
if(angle > Math.PI * 2 - a) {
angle -= Math.PI * 2;
}
if(angle < a) {
let angle2 = angle / a * Math.PI / 2;
return new cc.Vec2(Math.cos(angle2) * n / 2 + m / 2, Math.sin(angle2) * n / 2);
}
if(angle < Math.PI - a) {
return new cc.Vec2(n / 2 / Math.tan(angle), n / 2);
}
if(angle < Math.PI + a) {
let angle2 = (angle - Math.PI / 2) / a * Math.PI /2 + Math.PI / 2;
return new cc.Vec2(Math.cos(angle2) * n / 2 - m / 2, Math.sin(angle2) * n / 2);
}
return new cc.Vec2(-n / 2 / Math.tan(angle), -n / 2);
}
使用getPosition就可以获得progress对应的边缘坐标了。
我只在console里测试了用Graphics绘图,没有测试进度条,应该问题不大。