如何设置图片四个方向圆角属性

一般图片圆角显示都是四个角都显示圆角，如果只有这个功能需求，采用常用的方法就可以了，也不用费那么多事情。但是在有些情况下需要只显示图片的2个圆角，就不太好实现了。

先看效果图 ，未做圆角转换的图片 

 

 

做了4个角的圆角转换的图片

 

 

 

只做了下面2个圆角转换的图片

 

 

 

如何实现画四个方向的弧线呢？

先看看示意图

 

 

 头文件

#import <Foundation/Foundation.h>



typedef enum {

    UIImageRoundedCornerTopLeft = 1,

    UIImageRoundedCornerTopRight = 1 << 1,

    UIImageRoundedCornerBottomRight = 1 << 2,

    UIImageRoundedCornerBottomLeft = 1 << 3

} UIImageRoundedCorner;



@interface UIImage (Utility)



//+ (void)addRoundedRectToPath(CGContextRef context, CGRect rect, float radius, UIImageRoundedCorner cornerMask);



- (UIImage *)roundedRectWith:(float)radius cornerMask:(UIImageRoundedCorner)cornerMask;



@end

 

 实现文件

 

#import "UIImage+Utility.h"

//UIKit坐标系统原点在左上角，y方向向下的（坐标系A），但在Quartz中坐标系原点在左下角，y方向向上的(坐标系B)。图片绘制也是颠倒的。
static void addRoundedRectToPath(CGContextRef context, CGRect rect, float radius, UIImageRoundedCorner cornerMask)
{
    //原点在左下方，y方向向上。移动到线条2的起点。
    CGContextMoveToPoint(context, rect.origin.x, rect.origin.y + radius);
    
    //画出线条2, 目前画线的起始点已经移动到线条2的结束地方了。
    CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height - radius);
    
    //如果左上角需要画圆角，画出一个弧线出来。
    if (cornerMask & UIImageRoundedCornerTopLeft) {
        
        //已左上的正方形的右下脚为圆心，半径为radius， 180度到90度画一个弧线，
        CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + rect.size.height - radius,
                        radius, M_PI, M_PI / 2, 1);
    }
   
    else {
         //如果不需要画左上角的弧度。从线2终点，画到线3的终点，
        CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height);
        
        //线3终点，画到线4的起点
        CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y + rect.size.height);
    }
    
    //画线4的起始，到线4的终点
    CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius,
                            rect.origin.y + rect.size.height);

    //画右上角
    if (cornerMask & UIImageRoundedCornerTopRight) {
        CGContextAddArc(context, rect.origin.x + rect.size.width - radius,
                        rect.origin.y + rect.size.height - radius, radius, M_PI / 2, 0.0f, 1);
    }
    else {
        CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + rect.size.height);
        CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + rect.size.height - radius);
    }

    CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + radius);

    //画右下角弧线
    if (cornerMask & UIImageRoundedCornerBottomRight) {
        CGContextAddArc(context, rect.origin.x + rect.size.width - radius, rect.origin.y + radius,
                        radius, 0.0f, -M_PI / 2, 1);
    }
    else {
        CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y);
        CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius, rect.origin.y);
    }

    CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y);

    //画左下角弧线
    if (cornerMask & UIImageRoundedCornerBottomLeft) {
        CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + radius, radius,
                        -M_PI / 2, M_PI, 1);
    }
    else {
        CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y);
        CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + radius);
    }

    CGContextClosePath(context);
}


@implementation UIImage (Utility)
- (UIImage *)roundedRectWith:(float)radius cornerMask:(UIImageRoundedCorner)cornerMask
{
    UIImageView *bkImageViewTmp = [[[UIImageView alloc] initWithImage:self] autorelease];

    int w = self.size.width;
    int h = self.size.height;

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst);

    CGContextBeginPath(context);
    addRoundedRectToPath(context,bkImageViewTmp.frame, radius, cornerMask);
    CGContextClosePath(context);
    CGContextClip(context);

    CGContextDrawImage(context, CGRectMake(0, 0, w, h), self.CGImage);

    CGImageRef imageMasked = CGBitmapContextCreateImage(context);
    CGContextRelease(context);
    CGColorSpaceRelease(colorSpace);

    UIImage    *newImage = [UIImage imageWithCGImage:imageMasked];

    CGImageRelease(imageMasked);

    return newImage;
}

@end 

 

 实现方法如下：

- (IBAction)showRectImage
{
    UIImage *rectImage = [UIImage imageNamed:@"test.jpg"];
    self.imageView.image = rectImage;
}

- (IBAction)showRoundImage
{
    UIImage *rectImage = [UIImage imageNamed:@"test.jpg"];
    UIImage *roundImage = [rectImage roundedRectWith:100
                                          cornerMask:UIImageRoundedCornerBottomLeft|UIImageRoundedCornerBottomRight|UIImageRoundedCornerTopLeft|UIImageRoundedCornerTopRight];
    self.imageView.image = roundImage;
}


- (IBAction)show2RoundImage
{
    UIImage *rectImage = [UIImage imageNamed:@"test.jpg"];
    UIImage *round2Image = [rectImage roundedRectWith:100
                                          cornerMask:UIImageRoundedCornerBottomLeft|UIImageRoundedCornerBottomRight];
    self.imageView.image = round2Image;

} 

 

对于四个角，用下面的角进行逻辑或的方法。

UIImageRoundedCornerTopRight

UIImageRoundedCornerTopLeft

UIImageRoundedCornerBottomRight

UIImageRoundedCornerBottomLeft 

 

项目文件下载

 

参考URL

http://stackoverflow.com/questions/4847163/round-two-corners-in-uiview 

http://stackoverflow.com/questions/4845211/just-two-rounded-corners 

http://blog.sallarp.com/iphone-uiimage-round-corners/