我正在尝试使用核心图形来编程方式来绘制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);