以编程方式绘制iOS 7样式的笔画 [英] Draw iOS 7-style squircle programmatically

问题描述

我正在尝试找到一种使用核心图形以编程方式绘制iOS 7风格图标"squircle"形状的方法. 我不是问如何绘制一个圆角矩形.鼠是超级椭圆:

I'm trying to find a way to draw a iOS 7-style icon 'squircle' shape programmatically, using core graphics. I'm not asking how to draw a rounded rectangle. A squircle is a superellipse:

与常规的圆角矩形略有不同:

which is slightly different than a regular rounded rectangle:

这是确切的公式

It's exact formula is readily available. However, I can't figure out how to draw this using, for example, a CGPath, let alone fill it, and be able to resize it rather easily. All this while being entirely exact with the formula.

推荐答案

引自维基百科:超级椭圆

特别是对于n = 1/2而言，四个圆弧中的每一个都是由两个轴定义的二次贝塞尔曲线；结果，每个弧都是抛物线的一部分.

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?这两个曲线(贝塞尔曲线和Squircle曲线)均由参数方程式定义.

So why not try to approximate Squircle using Bezier curves? Both curves (Bezier and Squircle) are defined by the parametric equations.

UIBezierPath类具有方法:addCurveToPoint:controlPoint1:controlPoint2:

在接收者的路径上附加三次贝塞尔曲线.

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

注意:使用addQuadCurveToPoint:controlPoint:方法会产生较差的结果-经过测试.

NOTE: Use of the addQuadCurveToPoint:controlPoint: method gives worse results - tested.

我使用了这种方法，结果就是这样:

I used this method and that's what happened as a result:

red line-圆角矩形，blue line-四次贝塞尔曲线的矩形

red line - rounded rectangle, blue line - rectangle from fours Bezier curves

如果对此结果感兴趣，请在下面绘制代码.

If this result is interested - drawing code below.

注意:要实现更精确的匹配，可能需要Bezier曲线来更改四个corner points的坐标(现在它们对应于刻有图形的矩形的角度).

NOTE: To achieve a more exact match Bezier curve can be required to change the coordinates of the four corner points (now they correspond to the angles of the rectangle in which is inscribed the figure).

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);

这篇关于以编程方式绘制iOS 7样式的笔画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！