之前看了一篇三次贝塞尔曲线练习之弹性的圆(http://www.jianshu.com/p/791d3a791ec2#),感觉写的挺好,效果实现的不错,知道原理后,没有细看代码,自己还是先写一个版本,再比较吧。关于怎样用三次贝塞尔曲线画圆,请参考以上链接。
效果图
初步实现的效果如下:
比较关键的地方就是状态分解及实现。状态分解上面的文章讲的很清楚了,都差不多:
不同
不同的地方就是中间状态的时候y轴半径缩减了一些,后半程与前半程也不是对称关系。贴段后半程的部分代码:
float MValue = M * radius * (1 + ((STATE3 - fraction) / (STATE3 - STATE2)) * 0.3f);
float deltaX = unitDistance * (fraction - STATE2) / (STATE3 - STATE2);
float radius_tem = unitDistance * (STATE3 - fraction) / (STATE3 - STATE2) / 6;//y轴拉伸
mPath.moveTo(startPoint.x + (deltaX + unitDistance) * 3 / 2, startPoint.y + radius - radius_tem);
mPath.cubicTo(startPoint.x + (deltaX + unitDistance) * 3 / 2 - MValue, startPoint.y + radius - radius_tem,startPoint.x - radius + deltaX * 2 + unitDistance, startPoint.y + MValue,startPoint.x + deltaX * 2 - radius + unitDistance, startPoint.y);//第三象限
mPath.cubicTo(startPoint.x + deltaX * 2 - radius + unitDistance, startPoint.y - MValue,
startPoint.x + (deltaX + unitDistance) * 3 / 2 - MValue, startPoint.y - radius + radius_tem,startPoint.x + (deltaX + unitDistance) * 3 / 2, startPoint.y - radius + radius_tem);//第二象限
mPath.cubicTo(startPoint.x + (deltaX + unitDistance) * 3 / 2 + MValue, startPoint.y - radius + radius_tem,startPoint.x + 2 * radius + deltaX + unitDistance, startPoint.y - MValue,startPoint.x + 2 * radius + deltaX + unitDistance, startPoint.y);//第一象限
mPath.cubicTo(startPoint.x + 2 * radius + deltaX + unitDistance, startPoint.y + MValue,
startPoint.x + MValue + (deltaX + unitDistance) * 3 / 2, startPoint.y + radius radius_tem,startPoint.x + (deltaX + unitDistance) * 3 / 2, startPoint.y + radius - radius_tem);//第四象限
canvas.drawPath(mPath, mPaint);
比较乱 ,也没优化,有时间再说吧。项目代码在 https://github.com/GoldbergM/BezierDemo.