我們在做iOS開發的時候，往往需要實現不規則形狀的頭像，如：

那如何去實現？

通常圖片都是矩形的，如果想在客戶端去實現不規則的頭像，需要自己去實現。

1.使用layer去實現, 見http://blog.csdn.net/johnzhjfly/article/details/39993345<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PC9wPgo8cD4yLsq508NDQVNoYXBlTGF5ZXIsIENBTGF5ZXLI57rOyKXKtc/WPC9wPgo8cD7O0sPHwLS/tL+0yOe6zsq508NDQVNoYXBlTGF5ZXLIpcq1z9YsPC9wPgo8cD62qNLl0ru49lNoYXBlZEltYWdlVmlld6OsvMyz0NPaVUlWaWV3o6wgtPrC68jnz8KjujwvcD4KPHA+PC9wPgo8cHJlIGNsYXNzPQ=="brush:java;">#import "ShapedImageView.h" @interface ShapedImageView() { CALayer *_contentLayer; CAShapeLayer *_maskLayer; } @end @implementation ShapedImageView - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { [self setup]; } return self; } - (void)setup { _maskLayer = [CAShapeLayer layer]; _maskLayer.path = [UIBezierPath bezierPathWithOvalInRect:self.bounds].CGPath; _maskLayer.fillColor = [UIColor blackColor].CGColor; _maskLayer.strokeColor = [UIColor redColor].CGColor; _maskLayer.frame = self.bounds; _maskLayer.contentsCenter = CGRectMake(0.5, 0.5, 0.1, 0.1); _maskLayer.contentsScale = [UIScreen mainScreen].scale; _contentLayer = [CALayer layer]; _contentLayer.mask = _maskLayer; _contentLayer.frame = self.bounds; [self.layer addSublayer:_contentLayer]; } - (void)setImage:(UIImage *)image { _contentLayer.contents = (id)image.CGImage; } @end 聲明了用於maskLayer個CAShapedLayer， CAShapedLayer有個path的屬性，將內容Layer的mask設置為maskLayer, 就可以獲取到我們想要的形狀。

path我們可以使用CAMutablePath任意的構造，上述的代碼運行想過如下：

如果將代碼改成

    _maskLayer = [CAShapeLayer layer];
    _maskLayer.path = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:20].CGPath;
    _maskLayer.fillColor = [UIColor blackColor].CGColor;
    _maskLayer.strokeColor = [UIColor redColor].CGColor;
    _maskLayer.frame = self.bounds;
    _maskLayer.contentsCenter = CGRectMake(0.5, 0.5, 0.1, 0.1);
    _maskLayer.contentsScale = [UIScreen mainScreen].scale;                 //非常關鍵設置自動拉伸的效果且不變形
    
    _contentLayer = [CALayer layer];
    _contentLayer.mask = _maskLayer;
    _contentLayer.frame = self.bounds;
    [self.layer addSublayer:_contentLayer];

的效果:

如果將代碼改成:

    CGMutablePathRef path = CGPathCreateMutable();
    CGPoint origin = self.bounds.origin;
    CGFloat radius = CGRectGetWidth(self.bounds) / 2;
    CGPathMoveToPoint(path, NULL, origin.x, origin.y + 2 *radius);
    CGPathMoveToPoint(path, NULL, origin.x, origin.y + radius);
    
    CGPathAddArcToPoint(path, NULL, origin.x, origin.y, origin.x + radius, origin.y, radius);
    CGPathAddArcToPoint(path, NULL, origin.x + 2 * radius, origin.y, origin.x + 2 * radius, origin.y + radius, radius);
    CGPathAddArcToPoint(path, NULL, origin.x + 2 * radius, origin.y + 2 * radius, origin.x + radius, origin.y + 2  * radius, radius);
    CGPathAddLineToPoint(path, NULL, origin.x, origin.y + 2 * radius);
    
    _maskLayer = [CAShapeLayer layer];
    _maskLayer.path = path;
    _maskLayer.fillColor = [UIColor blackColor].CGColor;
    _maskLayer.strokeColor = [UIColor clearColor].CGColor;
    _maskLayer.frame = self.bounds;
    _maskLayer.contentsCenter = CGRectMake(0.5, 0.5, 0.1, 0.1);
    _maskLayer.contentsScale = [UIScreen mainScreen].scale;                 //非常關鍵設置自動拉伸的效果且不變形
    
    _contentLayer = [CALayer layer];
    _contentLayer.mask = _maskLayer;
    _contentLayer.frame = self.bounds;
    [self.layer addSublayer:_contentLayer];

將是這個效果:

理論上我們可以構造出任意想要的形狀，但是有些形狀如果你不熟悉幾何知識的話是構造不出正確的

path的，從代碼上我們可以看到我們可以通過設置CALayer的contents屬性來設置顯示的內容，那我啤"/kf/web/php/" target="_blank" class="keylink">PHPC9wPgo8cD7Kx7K7yse/ydLUzai5/cno1sNDQVNoYXBlZExheWVytcRjb250ZW50c8C0yejWw21hc2tMYXllcsTYo7+08LC4yse/z7aotcSjrLT6wuvI58/Co7o8L3A+CjxwPjwvcD4KPHByZSBjbGFzcz0="brush:java;"> _maskLayer = [CAShapeLayer layer]; _maskLayer.fillColor = [UIColor blackColor].CGColor; _maskLayer.strokeColor = [UIColor clearColor].CGColor; _maskLayer.frame = self.bounds; _maskLayer.contentsCenter = CGRectMake(0.5, 0.5, 0.1, 0.1); _maskLayer.contentsScale = [UIScreen mainScreen].scale; //非常關鍵設置自動拉伸的效果且不變形 _maskLayer.contents = (id)[UIImage imageNamed:@"[email protected]"].CGImage; _contentLayer = [CALayer layer]; _contentLayer.mask = _maskLayer; _contentLayer.frame = self.bounds; [self.layer addSublayer:_contentLayer];

gray_bubble_right就是你想要的形狀，運行效果如下:

源代碼:https://github.com/heavensword/ShapedImageView