以程序方式绘制iOS 7风格的圆形

我正在尝试使用核心图形来编程方式来绘制iOS 7风格的图标“圆形”形状.我不是问如何画一个圆角的矩形.一个圆形是一个超椭圆：

它与常规圆角矩形略有不同：

这是is readily available的准确公式.但是,我无法弄清楚如何使用CGPath,更不用说填写它,并且可以轻松地调整大小.所有这一切与公式完全一致.任何想法？

解决方法

来自维基百科： Superellipse

For n = 1/2,in particular,each of the four arcs is a Quadratic Bézier curve defined by the two axes; as a result,each arc is a segment of a parabola.

那么为什么不试图用Bezier曲线逼近Squircle？两个曲线(Bezier和Squircle)都由参数方程定义.

UIBezierPath Class有方法：addCurveToPoint：controlPoint1：controlPoint2：

Appends a cubic Bézier curve to the receiver’s path.

注意：使用addQuadCurveToPoint：controlPoint：方法使测试结果更差.

我使用这种方法,结果发生了什么事情：

红线 – 圆角矩形,蓝线 – 四边形Bezier曲线的矩形

如果这个结果有兴趣 – 下面的绘图代码.

注意：要获得更精确的匹配,可以要求改变四角点的坐标(现在它们对应于其中刻有图形的矩形的角度)的贝塞尔曲线.

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);

//set rect size for draw
float rectSize = 275.;
CGRect rectangle = CGRectMake(CGRectGetMidX(rect) - rectSize/2,CGRectGetMidY(rect) - rectSize/2,rectSize,rectSize);

//Rounded rectangle
CGContextSetStrokeColorWithColor(context,[UIColor redColor].CGColor);
UIBezierPath* roundedPath = [UIBezierPath bezierPathWithRoundedRect:rectangle cornerRadius:rectSize/4.7];
[roundedPath stroke];

//Rectangle from Fours Bezier Curves
CGContextSetStrokeColorWithColor(context,[UIColor blueColor].CGColor);
UIBezierPath *bezierCurvePath = [UIBezierPath bezierPath];

//set coner points
CGPoint topLPoint = CGPointMake(CGRectGetMinX(rectangle),CGRectGetMinY(rectangle));
CGPoint topRPoint = CGPointMake(CGRectGetMaxX(rectangle),CGRectGetMinY(rectangle));
CGPoint botLPoint = CGPointMake(CGRectGetMinX(rectangle),CGRectGetMaxY(rectangle));
CGPoint botRPoint = CGPointMake(CGRectGetMaxX(rectangle),CGRectGetMaxY(rectangle));

//set start-end points
CGPoint midRPoint = CGPointMake(CGRectGetMaxX(rectangle),CGRectGetMidY(rectangle));
CGPoint botMPoint = CGPointMake(CGRectGetMidX(rectangle),CGRectGetMaxY(rectangle));
CGPoint topMPoint = CGPointMake(CGRectGetMidX(rectangle),CGRectGetMinY(rectangle));
CGPoint midLPoint = CGPointMake(CGRectGetMinX(rectangle),CGRectGetMidY(rectangle));

//Four Bezier Curve
[bezierCurvePath moveToPoint:midLPoint];
[bezierCurvePath addCurveToPoint:topMPoint controlPoint1:topLPoint controlPoint2:topLPoint];
[bezierCurvePath moveToPoint:midLPoint];
[bezierCurvePath addCurveToPoint:botMPoint controlPoint1:botLPoint controlPoint2:botLPoint];
[bezierCurvePath moveToPoint:midRPoint];
[bezierCurvePath addCurveToPoint:topMPoint controlPoint1:topRPoint controlPoint2:topRPoint];
[bezierCurvePath moveToPoint:midRPoint];
[bezierCurvePath addCurveToPoint:botMPoint controlPoint1:botRPoint controlPoint2:botRPoint];

[bezierCurvePath stroke];

CGContextRestoreGState(context);