iOS 自定义相机页面

Raindew

发布于 2018-10-10 11:42:30

2.5K1

发布于 2018-10-10 11:42:30

文章被收录于专栏：Rindew的iOS技术分享

20180926105746690.jpg

如果你的应用程序对拍摄有要求的话，那么系统的拍摄界面就无法满足需要了。这时候我们需要自定义一个相机页，自定义有两种方式：

1、如果你需求的页面没有那么复杂，可以继承UIImagePickerController对其拍摄页面进行重绘。
2、如果是较复杂的拍摄页，则需要完全自定义相机页。关于这个可以参考类似这篇博客

我们今天先来说说第一种。也就是类似我文章头部的这种界面怎么画出来。额~这时候还是给心急的上个Demo吧。在文中，顺便说下我碰到的两个问题：拍摄页灰色透明遮罩绘制 和拍摄后黑屏问题

代码Demo都有了，我这里只说下流程。

首先写个继承UIImagePickerController的自定义类。那么，自定义绘制页应该使用到cameraOverlayView属性。简单来说你可以写一个View直接赋值给这个属性，就算是自定义拍摄页了。不过我Demo里面没有这样做，因为我这里拍摄完成要隐藏这个绘制的图层，而使用这个属性你就无法隐藏了。

        self.sourceType = UIImagePickerControllerSourceTypeCamera;
        //隐藏拍摄工具
        self.showsCameraControls = NO;
        //预览图
        [self.view addSubview:self.preView];
        //遮罩区父视图
        self.baseView = [[SNFCreditScoreCameraBaseView alloc] initWithFrame:kContentFrame];
        [self.view addSubview:self.baseView];

设置拍摄类型，隐藏工具栏，也就是拍摄按钮之类。 *预览图：这个就是拍摄之后的图片展示的。这个不是我们这次说的重点，看下Demo就行了，这里不多提了。

遮罩区：创建一个遮罩View

 - (instancetype)initWithFrame:(CGRect)frame {
   if (self = [super initWithFrame:frame]) {
       self.backgroundColor = [UIColor clearColor];
       //遮罩View
       self.mView = [[UIView alloc] initWithFrame:self.bounds];
       self.mView.backgroundColor = [UIColor blackColor];
       self.mView.alpha = 0.5;
       [self addSubview:self.mView];

然后绘制一个矩形透明区Layer加进去

    - (void)drawRect:(CGRect)rect {
    //绘制一个遮罩
    //贝塞尔曲线 画一个带有圆角的矩形
    UIBezierPath *bpath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height) cornerRadius:0];
    //贝塞尔曲线 画一个矩形
    [bpath appendPath:[[UIBezierPath bezierPathWithRoundedRect:CGRectMake(kMarginX, kMarginY, self.frame.size.width-kMarginX*2, self.frame.size.height - kMarginY * 2) cornerRadius:0] bezierPathByReversingPath]];
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = bpath.CGPath;
    //添加图层蒙板
    self.mView.layer.mask = shapeLayer;

然后你可以在self.view里面添加你的拍摄按钮。完成一个点击事件，例如我的：

    - (void)start:(UIButton *)sender {
    [self takePicture];
    [self performSelector:@selector(hiddenBtn) withObject:self afterDelay:0.8];
    if ([self.selectDelegate respondsToSelector:@selector(didSelectedButtonWithItem:)]) {
        [self.selectDelegate didSelectedButtonWithItem:0];
    }
}

上面代码我在调用代理之前调用了一个hiddenBtn方法，我的目的是拍摄后延迟一会隐藏拍摄按钮再展示预览图片。这个想法其实是为了省事，正确做法是把隐藏放在获取到图片后，即在拍摄后的代理方法中。然而万万没想到这个懒惰思想造成了一个Bug。

拍摄图片后，偶尔图片会是全黑的。黑屏了

查了一些资料得知：当拍摄的图片正在绘制的时候，如果做了有关UIKit的图层操作，会造成黑屏。很明显，我在这里隐藏按钮是不行的，如果同时在绘制，就会黑屏。这个问题在iOS 10出现，其他未见。

takePicture拍摄完成后会自动调用

- (void)imagePickerController:(SNFCSCImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info;
//注意SNFCSCImagePickerController被我修改过

把点击方法中的延迟隐藏代码删除，然后在这个方法中去隐藏即可。

    [picker hiddenBtn];//拍照按钮隐藏  必须是拍照后隐藏，如果在拍照的同时隐藏那么会出现隐藏动画影响picker绘制问题，图片成像可能是黑色的。

我们回到界面的绘制上来。

在自定义相机页View中的drawRect方法中使用贝赛尔曲线绘制页面线条，例如四个角框：

    UIColor *color = kLineColor;
    [color set]; //设置线条颜色
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    //左上角
    [path moveToPoint:CGPointMake(kMarginX + kLineWidth/2, kMarginY + kLineLong + kLineWidth/2)];
    [path addLineToPoint:CGPointMake(kMarginX + kLineWidth/2, kMarginY + kLineWidth/2)];
    [path addLineToPoint:CGPointMake(kMarginY + kLineLong + kLineWidth/2, kMarginY + kLineWidth/2)];
    path.lineWidth = kLineWidth;
    
    //左下角
    [path moveToPoint:CGPointMake(kMarginX + kLineWidth/2, CGRectGetHeight(self.frame) - kMarginY - kLineLong)];
    [path addLineToPoint:CGPointMake(kMarginX + kLineWidth/2, CGRectGetHeight(self.frame) - kMarginY - kLineWidth/2)];
    [path addLineToPoint:CGPointMake(kMarginX + kLineLong + kLineWidth/2, CGRectGetHeight(self.frame) - kMarginY - kLineWidth/2)];
    path.lineWidth = kLineWidth;
    
    //右上角
    [path moveToPoint:CGPointMake(CGRectGetWidth(self.frame) - kMarginX - kLineLong - kLineWidth/2, kMarginY + kLineWidth/2)];
    [path addLineToPoint:CGPointMake(CGRectGetWidth(self.frame) - kMarginX - kLineWidth/2, kMarginY + kLineWidth/2)];
    [path addLineToPoint:CGPointMake(CGRectGetWidth(self.frame) - kMarginX - kLineWidth/2, kMarginY + kLineLong + kLineWidth/2)];
    path.lineWidth = kLineWidth;
    
    //右下角
    [path moveToPoint:CGPointMake(CGRectGetWidth(self.frame) - kMarginX - kLineLong - kLineWidth/2, CGRectGetHeight(self.frame) - kMarginY - kLineWidth/2)];
    [path addLineToPoint:CGPointMake(CGRectGetWidth(self.frame) - kMarginX - kLineWidth/2, CGRectGetHeight(self.frame) - kMarginY - kLineWidth/2)];
    [path addLineToPoint:CGPointMake(CGRectGetWidth(self.frame) - kMarginX - kLineWidth/2, CGRectGetHeight(self.frame) - kMarginY - kLineLong)];
    path.lineWidth = kLineWidth;
    
    [path stroke];

这种绘制常见于二维码相机自定义中，其他绘制就不举例了。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018.09.26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度