网络图片的相框效果

SWSnapshotStackView是一个图片相框化的控件，这里是它的开源链接。它提供了两种形式的像框样式，效果如下图：

相框样式1 相框样式2

控件的具体绘制过程大致分成三个部分：相框边、相框阴影、相片，主体绘制代码位于drawRect函数中。绘制中还涉及到了一些小学数学知识，有兴趣的可以自己研究下。

相框与阴影

样式1的相框通过数学运算计算出具体大小，使用CGContextDrawPath来绘制整个相框。
样式2的相框计算相对复杂一些，需要计算出每一层相框的四个点，然后由这四个点绘制相框，当然具体运算就没有细致的研究了。

样式1中阴影的绘制相比与样式2较为复杂一些，将相框底部一个条形区域填充透明度为0.6的黑色形成阴影效果。代码参数如下：

//创建了一个宽度比相框左右各短5，高度为10的弧形区域
CGMutablePathRef shadowPath = CGPathCreateMutable();
CGPathMoveToPoint(shadowPath, NULL, originPoint.x + 5, originPoint.y - 10);
CGPathAddLineToPoint(shadowPath, NULL, originPoint.x + width - 5, originPoint.y - 10);
CGPathAddLineToPoint(shadowPath, NULL, originPoint.x + width - 5, originPoint.y);
CGPathAddQuadCurveToPoint(shadowPath, NULL, (originPoint.x + width) / 2, originPoint.y - 10);
CGPathCloseSubpath(shadowPath);
//将弧形区域下称5，并绘制阴影
UIColor* color = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.6];
CGContextSetShadowWithColor(color, CGSizeMake(0, 5), 5, color.CGColor);
CGContextAddPath(context, shadowPath);
CGContextFillPath(context);

加载网络图片

SWSnapshotStackView实质上就是一个UIImageView加上相框的显示效果，既然如此，一定会有加载网络图片的需求了，而这是SDWebImage库提供的功能。SDWebImage提供了UIImageView/UIButton的扩展，而SWSnapshotStackView控件是继承自UIView的。那么我们如何将这两个功能合到一个控件上呢？

有同学可能会说，直接派生一个UIImageView的子类，然后将SDSnapshotStackView中的drawRect接口相关代码复制到派生的子类中去就是了。本人也的确这么干了，后来才发现，在UIImageView的子类中重写drawRect函数是没有效果的！！！！

解决办法是给SDSnapshotStackView创建一个加载网络图片的扩展，并参考UIButton+WebCache.h实现网络图片的加载功能，实现代码如下：

-(void)sd_setImageWithURL:(NSURL*)url placeholderImage:(UIImage*)placeholder progress:(SDWebImageDownloaderProgressBlock)progressBlock completed:(SDWebImageCompletionBlock)completedBlock
{
  [self setImage:placeholder];
  [self sd_cancelCurrentImageLoad];
  if(!url){
    dispatch_main_async_safe(^{
      if(completedBlock){
        NSError* error = [NSError errorWithDomain:SDWebImageErrorDomain code:-1 userInfo:@{NSLocalizedDescriptionKey:@"Trying to load a nil url"}];
      }  
    });
    return;
  }

  __weak __typeof(self)wself = self;
  id<SDWebImageOperation> operation = [SDWebImageManager.sharedManager downloadImageWithURL:url options:0 progress:nil completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
        if (!wself) return;
        dispatch_main_sync_safe(^{
            __strong SWSnapshotStackView *sself = wself;
            if (!sself) return;
            if (image && completedBlock)
            {
                completedBlock(image, error, cacheType, url);
                return;
            }
            else if (image) {
                [sself setImage:image];
            }
            if (completedBlock && finished) {
                completedBlock(image, error, cacheType, url);
            }
        });
    }];
    [self sd_setImageLoadOperation:operation];
}

如此，便可以如使用普通的UIImageView一样使用SWSnapshotStackView控件了。
吐槽一下，这个控件的名称有点名不符实啊，跟Snapshot有毛关系啊。