SWSnapshotStackView是一个图片相框化的控件，这里是它的开源链接。它提供了两种形式的像框样式，效果如下图：
控件的具体绘制过程大致分成三个部分：相框边、相框阴影、相片，主体绘制代码位于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 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有毛关系啊。