前段时间产品让做一个在美食照片上添加菜名和价格标签的功能，做出来后又被砍了，现将实现步骤分享出来。先上功能图：
照片添加可移动标签示意图
首先初始化主界面，imageView显示模式为自适应模式，选择照片使用imagePickerController，数据来源设为照片库，允许编辑，设置代理等等，
UIImagePickerController* imagePick = [[UIImagePickerController alloc] init];
imagePick.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
imagePick.allowsEditing = YES;
imagePick.delegate = self;
[self presentViewController:imagePick animated:YES completion:nil];
在 - (void)imagePickerController:(UIImagePickerController*)picker didFinishPickingMediaWithInfo:(NSDictionary*)info 方法里调取图片，考虑到标签打到照片上，移动照片不易判断边界，所以创建一个空白的view，和照片的frame相同，罩在照片上，标签打在view上。
根据图片大小判断view bounds的代码如下，
- (CGSize)scaleSizeWithImage:(UIImage*)image andImageView:(UIImageView*)imageView
{ CGSize imageSize = CGSizeZero;
CGFloat imageWidth = image.size.width;
CGFloat imageHeight = image.size.height;
CGFloat imageScale = imageHeight / imageWidth;
NSLog(@"%@", image);
CGFloat screenScale = imageView.height / imageView.width;
if (imageScale > screenScale) {
imageSize = CGSizeMake(imageView.height / imageScale, imageView.height);}
else if (imageScale < screenScale) {
imageSize = CGSizeMake(imageView.width, imageView.width * imageScale);}
else if (imageScale == screenScale) {
imageSize = CGSizeMake(imageView.width, imageView.height);}
NSLog(@"%@", NSStringFromCGSize(imageSize));
return imageSize;}
然后封装一个tag类，对外提供labelText、isPos、tags等API，由显示标签图的imageView和显示价格或名字的lable组成tag，tag的size和imageView的size相同，label添加到imageView上，imageView基于label的尺寸大小而定，label相对于imageView的内容偏移量根据UI的标注适当调整。在- (instancetype)initWithFrame:(CGRect)frame初始化以上控件，并添加拖动和点击手势。
以上说到所有尺寸都根据label大小而定，label又根据text内容而定，所以重写labelText的set方法，并且依照标签底图的不同，调整label相对于imageView的frame。在初始化tag或者点击tag反转时，都需要判断tag的正反，重写isPos的set方法，根据isPos的值，重新对imageView赋值。
接下来对手势点击事件进行处理，点击事件响应：根据当前图片设置isPos的值，isPos的set方法将图片替换，代码如下：
- (void)setIsPos:(BOOL)isPos
{ _isPos = isPos;
if (isPos) { self.imageView.image = [UIImage imageNamed:@"textTagAnti"];
self.label.origin = CGPointMake( 6, (self.imageView.image.size.height - self.label.height) / 2);}
else { self.imageView.image = [UIImage imageNamed:@"textTag"];
self.label.origin = CGPointMake( 24, (self.imageView.image.size.height - self.label.height) / 2); } }
- (void)tap:(UITapGestureRecognizer*)tap
{ if ([self.imageView.image isEqual:[UIImage imageNamed:@"textTag"]]) {
self.isPos = YES; }
else if ([self.imageView.image
isEqual:[UIImage imageNamed:@"textTagAnti"]]) {
self.isPos = NO; } }
拖动事件响应：要将tag限制在照片的view遮罩范围内，获取tag的centerPoint，以及手指相对于tag的偏移量，组成point，根据point的x、y 与 遮罩view的一系列对比，将tag限制在view范围内，
- (void)pan:(UIPanGestureRecognizer*)pan
{
self.point = pan.view.origin;//只是获取tag的位置
if (pan.state != UIGestureRecognizerStateEnded && pan.state != UIGestureRecognizerStateFailed) {
//获取手指的相对位移
CGPoint translation = [pan translationInView:pan.view];
NSLog(@"translation%@", NSStringFromCGPoint(translation));
CGPoint newCenter = CGPointMake(pan.view.center.x + translation.x,
pan.view.center.y + translation.y);
[pan setTranslation:CGPointZero inView:pan.view];
if ((newCenter.y >= pan.view.height / 2) && (newCenter.y <= pan.view.superview.height - pan.view.height / 2) && (newCenter.x >= pan.view.width / 2) && (newCenter.x <= pan.view.superview.width - pan.view.width / 2)) { pan.view.center = newCenter; }
else { [pan setTranslation:CGPointZero inView:pan.view]; } } }
至此，tag的自定义封装结束，接下来到主控制器添加tag，本项目是两个按钮分别添加菜品和价格，所以使用字典存储标签，key就是标签的tags，
最后的截屏保存，开启图形上下文，尽量使用UIGraphicsBeginImageContextWithOptions(self.coverView.bounds.size, NO, 0); ,若使用UIGraphicsBeginImageContext(CGSize size)。可能会造成截取的图片不清晰，具体代码参考 demo：GitHub - wenwudong/tagView: 照片添加标签，点击标签翻转，可以拖动标签，截取添加标签的图片
网友评论