iOS Quartz2D画圆角矩形时的线宽不一致问题->Quartz2D抗锯齿机制问题

来源：互联网发布：雅克152教练机尺寸数据编辑：程序博客网时间：2024/05/29 10:56

转载自：http://www.jianshu.com/p/6f39f595d5b8

一般直接AddArc..或者用BezierPath,

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;

+(instancetype)ImageFromFrame:(CGSize)size                  BorderColor:(UIColor *)color                 BorderRadius:(CGFloat)radius                  BorderWidth:(CGFloat)width{    //创建上下文    CGFloat x = size.width;    CGFloat y = size.height;    UIGraphicsBeginImageContextWithOptions(size, NO, 0.0);    //获得上下文    CGContextRef context = UIGraphicsGetCurrentContext();    CGContextSetRGBFillColor (context,  1.0, 1.0, 1.0, 1.0);//设置填充颜色(白色)    CGContextSetLineWidth(context, width);//线的宽度    CGContextSetStrokeColorWithColor(context, color.CGColor);//线框颜色    //    CGPathRef clippath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0,0, x, y)cornerRadius:radius].CGPath;    //    CGContextAddPath(context, clippath);    CGContextMoveToPoint(context, x, y-radius);  // 开始坐标右边开始    CGContextAddArcToPoint(context, x, y, x-radius, y, radius);  // 右下角角度    CGContextAddLineToPoint(context, radius, y);    CGContextAddArcToPoint(context, 0, y, 0, y-radius, radius); // 左下角角度    CGContextAddLineToPoint(context, 0, radius);    CGContextAddArcToPoint(context, 0, 0, radius, 0, radius); // 左上角    CGContextAddLineToPoint(context, x-radius, 0);    CGContextAddArcToPoint(context, x, 0, x, radius, radius); // 右上角    CGContextClosePath(context);    CGContextDrawPath(context, kCGPathFillStroke); //根据坐标绘制路径    //3.取出图片    UIImage *newImage=UIGraphicsGetImageFromCurrentImageContext();    //4.结束上下文    UIGraphicsEndImageContext();    return newImage;}

这个方法看上去没什么问题,的确是沿着路径画的,但是调试一下就会发现,画出来的圆角矩形圆角处的线宽和直线的线宽是不一致的,效果非常诡异.

9E7D47FF-40E5-4465-ACD7-0BC5F6983F4B.png

百度过滤了N页垃圾之后,后发现一篇有用的博文

跟Quartz2D的绘制时的抗锯齿机制有关

http://my.oschina.net/lych0317/blog/126215

具体原理看博文,不过里面的代码也是有问题的.

正确完美的解决方案如下:

路径要往里扣除线宽的一半 !!!!

+(instancetype)ImageFromFrame:(CGSize)size                  BorderColor:(UIColor *)color                 BorderRadius:(CGFloat)radius                  BorderWidth:(CGFloat)width{    //创建上下文    CGFloat x = size.width;    CGFloat y = size.height;    UIGraphicsBeginImageContextWithOptions(size, NO, 0.0);    //获得上下文    CGContextRef context = UIGraphicsGetCurrentContext();    CGContextSetRGBFillColor (context,  1.0, 1.0, 1.0, 1.0);//设置填充颜色(白色)    CGContextSetLineWidth(context, width);//线的宽度    CGContextSetStrokeColorWithColor(context, color.CGColor);//线框颜色    CGContextMoveToPoint(context, x-width/2, y-radius-width/2);  // 开始坐标右边开始    CGContextAddArcToPoint(context, x-width/2, y-width/2, x-radius-width/2, y-width/2, radius);  // 右下角角度    CGContextAddLineToPoint(context, radius+width/2, y-width/2);    CGContextAddArcToPoint(context, 0+width/2, y-width/2, 0 + width/2, y-radius+width/2, radius); // 左下角角度    CGContextAddLineToPoint(context, 0+width/2, radius+width/2);    CGContextAddArcToPoint(context, 0+width/2, 0+width/2, radius+width/2, 0+width/2, radius); // 左上角    CGContextAddLineToPoint(context, x-radius-width/2, 0+width/2);    CGContextAddArcToPoint(context, x-width/2, 0+width/2, x-width/2, radius+width/2, radius); // 右上角    CGContextClosePath(context);    CGContextDrawPath(context, kCGPathFillStroke); //根据坐标绘制路径    //3.取出图片    UIImage *newImage=UIGraphicsGetImageFromCurrentImageContext();    //4.结束上下文    UIGraphicsEndImageContext();    return newImage;}

A2AC47A0-C9B5-48A8-86B9-8C498DC1C2C1.png

0 0