如何在iOS中使用弯曲边缘绘制圆弧? [英] How to draw Arc with curved edge in iOS?
本文介绍了如何在iOS中使用弯曲边缘绘制圆弧?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在我的一个应用程序中,我试图绘制一个带有圆边的渐变弧。如下图所示。
In one of my application, I am trying to draw a gradient arc with rounded edges. Like the following image.
这是什么到目前为止,我已使用以下代码完成。
This is what I have done so far using the following code.
-(void)startArc
{
UIBezierPath *roundedArc = [self arcWithRoundedCornerAt:centerPoint startAngle:DEGREES_TO_RADIANS(-90) endAngle:DEGREES_TO_RADIANS(90) innerRadius:width-20 outerRadius:width cornerRadius:0];
CAShapeLayer *mask = [CAShapeLayer new];
[mask setPath:roundedArc.CGPath];
[mask setFrame:_outerView.bounds];
[mask setShouldRasterize:YES];
[mask setRasterizationScale:[UIScreen mainScreen].scale];
CAGradientLayer *gradient = [CAGradientLayer new];
[gradient setFrame:_outerView.bounds];
// [gradient setColors:[NSArray arrayWithObjects:(id)[[UIColor colorWithRed:0.86 green:0.91 blue:0.96 alpha:1.0f] CGColor],(id)[[UIColor colorWithRed:0.98 green:0.99 blue:0.99 alpha:1.0f] CGColor], nil]];
[gradient setColors:[NSArray arrayWithObjects:(id)[UIColor colorWithRed:0.19 green:0.64 blue:0.89 alpha:1.0].CGColor,(id)[UIColor colorWithRed:0.14 green:0.76 blue:0.56 alpha:1.0f].CGColor, nil]];
[gradient setMask:mask];
[_outerView.layer addSublayer:gradient];
}
- (UIBezierPath *)arcWithRoundedCornerAt:(CGPoint)center
startAngle:(CGFloat)startAngle
endAngle:(CGFloat)endAngle
innerRadius:(CGFloat)innerRadius
outerRadius:(CGFloat)outerRadius
cornerRadius:(CGFloat)cornerRadius
{
CGFloat innerTheta = asin(cornerRadius / 2.0 / (innerRadius + cornerRadius)) * 2.0;
CGFloat outerTheta = asin(cornerRadius / 2.0 / (outerRadius - cornerRadius)) * 2.0;
UIBezierPath *path = [UIBezierPath bezierPath];
[path addArcWithCenter:center
radius:innerRadius + cornerRadius
startAngle:endAngle - innerTheta
endAngle:startAngle + innerTheta
clockwise:false];
[path addArcWithCenter:center
radius:outerRadius - cornerRadius
startAngle:startAngle + outerTheta
endAngle:endAngle - outerTheta
clockwise:true];
[path closePath];
return path;
}
使用上面的代码,我已经实现了以下
With the above code, I have achieved the following
有人可以告诉我如何实现圆润的边缘吗?我实施的那个有锋利的边缘。
Can someone let me know on how to achieve that rounded edges ? The one which I have implemented have sharp edges.
推荐答案
最简单的方法可能是:
- 创建一条弧形路径(沿着目标弧的中间)作为路径
- 设置线宽(在你的情况下为20) )和线帽(圆顶帽)
- 将路径转换为描边路径(CGContextReplacePathWithStrokedPath)
- 继续使用现有的渐变代码
- Create a single arc path (along the middle of your target arc) as a path
- Set the line width (20 in your case) and the line cap (rounded caps)
- Convert the path into a stroked path (CGContextReplacePathWithStrokedPath)
- Continue with your existing code for the gradient
描边会将90度弧线路径(无限窄)转换为线条轮廓这是20像素宽,具有圆形的行尾。
The stroking will convert your 90 degree arc path, which is infinitely narrow, into an outline of a line that is 20 pixel wide and has rounded line endings.
代码大致如下所示:
- (UIBezierPath *)arcWithRoundedCornerAt:(CGPoint)center
startAngle:(CGFloat)startAngle
endAngle:(CGFloat)endAngle
innerRadius:(CGFloat)innerRadius
outerRadius:(CGFloat)outerRadius
cornerRadius:(CGFloat)cornerRadius
context:(CGContext)context
{
CGFloat radius = (innerRadius + outerRadius) / 2.0;
CGContextAddArc(context, center.x, center.y, radius, startAngle, endAngle, true);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, outerRadius - innerRadius);
CGContextReplacePathWithStrokedPath(context)
return [UIBezierPath bezierPathWithCGPath: CGContextCopyPath(context)];
}
这篇关于如何在iOS中使用弯曲边缘绘制圆弧?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文