[iOS] 图文讲解原生二维码有效扫描区域 rectOfInte

作者: 流火绯瞳 | 来源:发表于2019-05-05 16:04 被阅读0次

在使用原生的 AVFoundation 框架实现二维码扫描的时候, 需要注意一下两个方面:

启动相机的卡顿问题;

有效扫描区域的问题; 本文主要针对这两个问题进行讲解.

1. 启动扫描卡顿

在Push到二维码扫描页时, 一般在初始化扫描视图的时候就开始启动session:

[self.session startRunning]

但是这样会有一个问题, 就是点击扫描按钮的时候, 按钮会1秒多的卡顿, 然后才会Push到扫描页;
针对这个问题, 有的人是在Push到扫描页的时候, 才去启动 session, 但是这样会有1 -- 2秒的等待时间, 才会出现正常的扫描画面;

针对此问题, 解决的方式很简单, 依然在初始化的时候启动 session, 但是, 需要异步去启动:

[self.activity startAnimating];
    dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
    dispatch_async(queue, ^{
        
        if (self.session.isRunning == NO) {
            NSLog(@"startRunning");
            [self.session startRunning];
        }
        
        dispatch_async(dispatch_get_main_queue(), ^{
            
            [self.activity stopAnimating];
        });
    });

这样, 在push 的过程中就在准备session, 可以很大程度上缩短等待时间, 甚至, 在push 到扫描页的时候, 几乎看不到等待时间.

需要注意

如果使用了属性观察者模式, 其方法是异步执行的, 需要返回到主线程, 例如这里我监听了属性 running:

[self.session addObserver:self forKeyPath:@"running" options:NSKeyValueObservingOptionNew context:nil];

根据这个来开始/停止扫描线的动画, 这时候, 就需要回到主线程执行:

- (void)observeValueForKeyPath:(NSString *)keyPath
                      ofObject:(id)object
                        change:(NSDictionary *)change
                       context:(void *)context{
    
    dispatch_async(dispatch_get_main_queue(), ^{
        
        if ([object isKindOfClass:[AVCaptureSession class]]) {
            
            if ([keyPath isEqualToString:@"running"]) {
                BOOL isRunning = ((AVCaptureSession *)object).isRunning;
                if (isRunning) {
                    
                    [self startAnimate];
                }else{
                    [self stopAnimate];
                }
            }
            
        }
    });
}

2. AVCaptureMetadataOutput 有效扫描区域 rectOfInterest

首先, 需要知道 rectOfInterest 所在的坐标系, 其坐标原点是图像的左上角, 注意, 这里是图像的左上角, 不是设备的左上角, 其值介于 0 -- 1, 如果设置为 CGRectMake(0, 0, 1, 1) 将是全屏幕扫描; 所以需要将我们的扫描框的坐标(相对于设备), 转换为 0--1 之间的值(相对于图像).

2.1. 影响因素

要想准确计算其区域, 就需要知道影响因素, rectOfInterest 的影响因素有以下两个:

AVCaptureSession 的 sessionPreset 属性

AVCaptureVideoPreviewLayer 的 videoGravity 属性

前者为图像的分辨率, 不同的值生成不同分辨率的图像;
后者为预览时的图像填充模式, 类似于 UIView 的 contentMode 属性;

sessionPreset

// 完整的图像分辨率输出，不支持音频
NSString *const AVCaptureSessionPresetPhoto; 
// 最高分辨率，根据设备系统自动选择最高分辨率
NSString *const AVCaptureSessionPresetHigh;
// 中等分辨率，根据设备系统自动选择中等分辨率
NSString *const AVCaptureSessionPresetMedium;
// 最低分辨率，根据设备系统自动选择最低分辨率
NSString *const AVCaptureSessionPresetLow;
// 以352x288分辨率输出
NSString *const AVCaptureSessionPreset352x288;
// 以640x480分辨率输出
NSString *const AVCaptureSessionPreset640x480;
// 以1280x720分辨率输出
NSString *const AVCaptureSessionPreset1280x720;
// 以1920x1080分辨率输出
NSString *const AVCaptureSessionPreset1920x1080;
// 以960x540分辨率输出
NSString *const AVCaptureSessionPresetiFrame960x540;
// 以1280x720分辨率输出
NSString *const AVCaptureSessionPresetiFrame1280x720;
// 不去控制音频与视频输出设置，而是通过已连接的捕获设备的 activeFormat 来反过来控制 capture session 的输出质量等级
NSString *const AVCaptureSessionPresetInputPriority;

videoGravity

// 保持原始比例，自适应最小的bounds，不足的会有留白；类似于UIView的contentMode属性的UIViewContentModeScaleAspectFit.
AVLayerVideoGravityResizeAspect；

// 保持原始比例，填充整个bounds，多余的会被剪掉，类似于UIView的contentMode属性的UIViewContentModeScaleAspectFill.
AVLayerVideoGravityResizeAspectFill；

// 拉伸直到填充整个bounds，类似于UIView的contentMode属性的UIViewContentModeScaleToFill.
AVLayerVideoGravityResize

2.2. 转换关系

其实, 我们主要需要做的就是, 将我们屏幕中的扫描区域, 转换到图像中对应的位置上;
首先需要知道图像的方向, AVFoundation 捕获的图像是横着的, 且方向朝右;
其次, 需要知道我们在屏幕中看到的图像, 和实际的图像是镜像关系;

这里以图像完全填充屏幕(即 videoGravity 值为 AVLayerVideoGravityResize), 假设, 我们设置的扫描区域为(30, 80, 100, 80);

另外, 转换的关系与设备方向也有关系, 下面就是图像完全填充屏幕时的不同设备方向的转换关系

2.2.1. 竖屏, `Home` 键在下 (`UIInterfaceOrientationPortrait`)

此时设备方向为朝上(竖屏, Home键在下), 扫描区域在设备屏幕中的位置为:

首先, 将图像进行左右镜像, 中间图所示
接着顺时针旋转 90 度, 使设备方向和图像方向一致,右边图所示

此时, 显示的位置, 大致就是其在图像中的位置; 扫描区域的位置有了, 但是其坐标原点呢? 上面说了是在图像的左上角, 是上面图中的哪个呢? o1 ? 还是 o2?

答案是 o2, 图像的左上角, 当然是当图像是正着看的时候的左上角, 也就是我们看到的图像的右上角; 这时的坐标系如下所示:

坐标系有了, 接下来就是坐标的转化了; 和最初的扫描区域相比, 可以看到 x/y/width/height 都进行的镜像翻转, 即最终的结果为:

CGRect r = CGRectMake(0, 0, 1., 1.);
r.origin.x = (cropRect.origin.y)/size.height;
r.origin.y = (size.width - CGRectGetMaxX(cropRect))/size.width;
r.size.width = cropRect.size.height/size.height;
r.size.height = cropRect.size.width/size.width;

这里的size为预览图层的Size, 一般也是屏幕的size;
上面是竖屏情况下, 图片完全填充时的计算方式; 其他情况转换方式是一样的, 只不过需要计算图片的实际宽高;

2.2.2. 横屏, `Home` 键在右 (`UIInterfaceOrientationLandscapeRight`)

扫描区域在设备屏幕中位置为:

由上面知道, 捕获到的图像是横着的, 方向朝右, 此时设备也是横着的, 但是设备的方向和图像相反, 所以, 将扫描区域进行镜像翻转之后, 再顺时针旋转 180 度:

其坐标原点同上, 也是在我们看到的图像的右上角; 所以, 其转换公式为:

        CGRect r = CGRectMake(0, 0, 1., 1.);
        r.origin.x = (CGRectGetMinX(cropRect))/size.width;
        r.origin.y = (CGRectGetMinY(cropRect))/size.height;
        r.size.width = cropRect.size.width/size.width ;
        r.size.height = cropRect.size.height/size.height;

2.2.3. 横屏, `Home` 键在左 (`UIInterfaceOrientationLandscapeLeft`)

扫描区域在设备屏幕中位置为:

此时设备和图像方向一致, 所以, 只需要进行上下镜像即可:

所以, 其转换公式为:

        CGRect r = CGRectMake(0, 0, 1., 1.);
        r.origin.x = (CGRectGetMinX(cropRect))/size.width;
        r.origin.y = (CGRectGetMinY(cropRect))/size.height;
        r.size.width = cropRect.size.width/size.width ;
        r.size.height = cropRect.size.height/size.height;

2.2.4. 竖屏, `Home` 键在上(`UIInterfaceOrientationPortraitUpsideDown`)

先进行左右镜像, 然后, 逆时针旋转 90 度:

所以, 其转换公式为:

        CGRect r = CGRectMake(0, 0, 1., 1.);
        r.origin.x = (size.height - CGRectGetMaxY(cropRect))/size.height;
        r.origin.y = (CGRectGetMinX(cropRect))/size.width;
        r.size.width = cropRect.size.height/size.height;
        r.size.height = cropRect.size.width/size.width;

2.3. 其他图像填充模式转换

上面讲的是, 图像完全填充满整个屏幕的情况, 有可能会导致图片被挤压变形, 实际使用时很少采用; 而 AVLayerVideoGravityResizeAspect 模式, 屏幕中可能会左右留有黑边或者上下留有黑边, 也很少采用; 一般我们在使用的时候会使用 AVLayerVideoGravityResizeAspectFill 方式进行图片填充, 铺满屏幕, 多余的会被裁掉; 不同的填充模式, 在参考上面的转换方式进行转换时, 需要考虑被裁掉的部分图像, 或者出现的黑边;

以下示意图的说明

左图为扫描区域在屏幕中的位置, 右图为扫描区域转换为图像中的位置;
灰色背景为设备屏幕大小;
红色线框为图像大小
红色区域为扫描框

2.3.1. 竖屏, Home 键在下

AVLayerVideoGravityResizeAspectFill

设备竖屏状态

图像填充模式为 AVLayerVideoGravityResizeAspectFill

图像上下或左右部分会被裁去

扫描区域在设备中的位置如下图左所示:

等宽情况下, 图像比屏幕高

等高情况下, 图像比屏幕宽

可以看到, 实际我们在屏幕中看到的图像只是原图像的中间部分, 上下或左右 padding 大小的区域被裁去;

此时, 坐标的转换应该是:

// p1 为设备屏幕(即previewLayer)的height/width
// p2 为图像的分辨率 height/width
        if (p1 < p2) {
            CGFloat height = size.width * p2;
            CGFloat padding = (height - size.height)/2.;
            
            r.origin.x = (CGRectGetMinY(cropRect) + padding)/height ;
            r.origin.y = (size.width - CGRectGetMaxX(cropRect))/size.width ;
            r.size.width = cropRect.size.height/height ;
            r.size.height = cropRect.size.width/size.width ;
        } else {
            CGFloat width = size.height / p2;
            CGFloat padding = (width - size.width)/2.;
            
            r.origin.x = CGRectGetMinY(cropRect)/size.height ;
            r.origin.y = (size.width - CGRectGetMaxX(cropRect) + padding)/width;
            r.size.width = cropRect.size.height/size.height ;
            r.size.height = cropRect.size.width/width ;
        }

AVLayerVideoGravityResizeAspect

设备竖屏状态

图像填充模式为 AVLayerVideoGravityResizeAspect

图像上下或左右部分会有黑边

等高情况下, 图像比屏幕宽小

等宽情况下, 图像比屏幕高小

可以看到, 实际我们在屏幕中看到的图像是原图像的等比缩小, 上下或左右会有 padding 区域的黑边;

此时, 坐标的转换应该是:

// p1 为设备屏幕(即previewLayer)的height/width
// p2 为图像的分辨率 height/width
        if (p1 > p2) {
            CGFloat height = size.width * p2;
            CGFloat padding = (size.height - height)/2.0;
            
            r.origin.x = (CGRectGetMinY(cropRect) - padding)/height ;
            r.origin.y = (size.width - CGRectGetMaxX(cropRect))/size.width ;
            r.size.width = cropRect.size.height/height ;
            r.size.height = cropRect.size.width/size.width ;
        } else {
            CGFloat width = size.height * (1./p2);
            CGFloat padding = (size.width - width)/2;
            
            r.origin.x = CGRectGetMinY(cropRect)/size.height ;
            r.origin.y = (size.width - CGRectGetMaxX(cropRect) - padding)/width ;
            r.size.width = cropRect.size.height/size.height ;
            r.size.height = cropRect.size.width/width ;
        }

2.3.2. 横屏, Home 键在右

AVLayerVideoGravityResizeAspectFill

图像填充模式为 AVLayerVideoGravityResizeAspectFill
图像上下或左右部分会被裁去

扫描区域在设备中的位置如下图左所示:

等宽情况下, 图像比屏幕高大

等高情况下, 图像比屏幕宽大

可以看到, 实际我们在屏幕中看到的图像只是原图像的中间部分, 上下或左右 padding 大小的区域被裁去;

此时, 坐标的转换应该是:

// p1 为设备屏幕(即previewLayer)的height/width
// p2 为图像的分辨率 height/width
        if (p1 > p2) {
            CGFloat width = size.height / p2;
            CGFloat padding = (width - size.width) / 2.0;
            
            r.origin.x = (CGRectGetMinX(cropRect) + padding)/width ;
            r.origin.y = (CGRectGetMinY(cropRect))/size.height ;
            r.size.width = cropRect.size.width/width ;
            r.size.height = cropRect.size.height/size.height ;
        } else {
            CGFloat height = size .width * p2;
            CGFloat padding = (height  - size.height) / 2.0;
            
            r.origin.x = CGRectGetMinX(cropRect) / size.width;
            r.origin.y = (CGRectGetMinY(cropRect) + padding) / height;
            r.size.width = CGRectGetWidth(cropRect) / size.width;
            r.size.height = CGRectGetHeight(cropRect) / height;
        }

AVLayerVideoGravityResizeAspect

图像填充模式为 AVLayerVideoGravityResizeAspect
图像上下或左右部分会有黑边

等宽情况下, 图像比设备的高小

等高情况下, 图像比设备的宽小

可以看到, 实际我们在屏幕中看到的图像是原图像的等比缩小, 上下或左右会有 padding 区域的黑边;

此时, 坐标的转换应该是:

// p1 为设备屏幕(即previewLayer)的height/width
// p2 为图像的分辨率 height/width
        if (p1 > p2) {
            CGFloat height = size.width * p2;
            CGFloat padding = (size.height - height)/2.0;
            
            r.origin.x = CGRectGetMinX(cropRect)/size.width ;
            r.origin.y = (CGRectGetMinY(cropRect) - padding)/ height ;
            r.size.width = cropRect.size.width/size.width ;
            r.size.height =  cropRect.size.height/height ;
        } else {
            CGFloat width = size.height / p2;
            CGFloat padding = (size.width - width)/2.;
            
            r.origin.x = (CGRectGetMinX(cropRect) - padding)/width ;
            r.origin.y = (CGRectGetMinY(cropRect))/size.height ;
            r.size.width = cropRect.size.width/width ;
            r.size.height = cropRect.size.height/size.height ;
        }

2.3.3. 横屏, Home 键在左

AVLayerVideoGravityResizeAspectFill

图像填充模式为 AVLayerVideoGravityResizeAspectFill
图像上下或左右部分会被裁去

扫描区域在设备中的位置如下图左所示:

等高情况下, 图像比屏幕宽大

等宽情况下, 图像比屏幕高

可以看到, 实际我们在屏幕中看到的图像只是原图像的中间部分, 上下或左右 padding 大小的区域被裁去;

此时, 坐标的转换应该是:

// p1 为设备屏幕(即previewLayer)的height/width
// p2 为图像的分辨率 height/width
        if (p1 > p2) {
            CGFloat width = size.height / p2;
            CGFloat padding = (width - size.width) / 2.0;
            
            r.origin.x = (CGRectGetMinX(cropRect) + padding)/width ;
            r.origin.y = (CGRectGetMinY(cropRect))/size.height ;
            r.size.width = cropRect.size.width/width ;
            r.size.height = cropRect.size.height/size.height ;
        } else {
            CGFloat height = size .width * p2;
            CGFloat padding = (height  - size.height) / 2.0;
            
            r.origin.x = CGRectGetMinX(cropRect) / size.width;
            r.origin.y = (CGRectGetMinY(cropRect) + padding) / height;
            r.size.width = CGRectGetWidth(cropRect) / size.width;
            r.size.height = CGRectGetHeight(cropRect) / height;
        }

AVLayerVideoGravityResizeAspect

图像填充模式为 AVLayerVideoGravityResizeAspect
图像上下或左右部分会有黑边

等宽情况下, 图像比屏幕高小

等高情况下, 图像比屏幕宽小

可以看到, 实际我们在屏幕中看到的图像是原图像的等比缩小, 上下或左右会有 padding 区域的黑边;

此时, 坐标的转换应该是:

// p1 为设备屏幕(即previewLayer)的height/width
// p2 为图像的分辨率 height/width
        if (p1 > p2) {
            CGFloat height = size.width * p2;
            CGFloat padding = (size.height - height)/2.0;
            
            r.origin.x = CGRectGetMinX(cropRect)/size.width ;
            r.origin.y = (CGRectGetMinY(cropRect) - padding)/ height ;
            r.size.width = cropRect.size.width/size.width ;
            r.size.height =  cropRect.size.height/height ;
        } else {
            CGFloat width = size.height / p2;
            CGFloat padding = (size.width - width)/2.;
            
            r.origin.x = (CGRectGetMinX(cropRect) - padding)/width ;
            r.origin.y = (CGRectGetMinY(cropRect))/size.height ;
            r.size.width = cropRect.size.width/width ;
            r.size.height = cropRect.size.height/size.height ;
        }

2.3.4. 竖屏, Home 键在上

AVLayerVideoGravityResizeAspectFill

图像填充模式为 AVLayerVideoGravityResizeAspectFill
图像上下或左右部分会被裁去

扫描区域在设备中的位置如下图左所示:

等宽情况下, 图像比屏幕高大

等高情况下, 图像比屏幕宽大

可以看到, 实际我们在屏幕中看到的图像只是原图像的中间部分, 上下或左右 padding 大小的区域被裁去;

此时, 坐标的转换应该是:

// p1 为设备屏幕(即previewLayer)的height/width
// p2 为图像的分辨率 height/width
        if (p1 < p2) {
            CGFloat height = size.width * p2;
            CGFloat padding = (height - size.height)/2.;
            
            r.origin.x = (size.height - CGRectGetMaxY(cropRect) + padding)/height;
            r.origin.y = (CGRectGetMinX(cropRect))/size.width;
            r.size.width = cropRect.size.height/height;
            r.size.height = cropRect.size.width/size.width;
        } else {
            CGFloat width = size.height / p2;
            CGFloat padding = (width - size.width)/2.;
            
            r.origin.x = (size.height - CGRectGetMaxY(cropRect))/size.height;
            r.origin.y = (CGRectGetMinX(cropRect) + padding)/width;
            r.size.width = cropRect.size.height/size.height;
            r.size.height = cropRect.size.width/width;
        }

AVLayerVideoGravityResizeAspect

图像填充模式为 AVLayerVideoGravityResizeAspect
图像上下或左右部分会有黑边

等宽情况下, 图像比屏幕高小

等高情况下, 图像比屏幕宽小

可以看到, 实际我们在屏幕中看到的图像是原图像的等比缩小, 上下或左右会有 padding 区域的黑边;

此时, 坐标的转换应该是:

// p1 为设备屏幕(即previewLayer)的height/width
// p2 为图像的分辨率 height/width
        if (p1 > p2) {
            CGFloat height = size.width * p2;
            CGFloat padding = (size.height - height)/2.0;
            
            r.origin.x = (size.height - CGRectGetMaxY(cropRect) - padding)/height;
            r.origin.y = (CGRectGetMinX(cropRect))/size.width;
            r.size.width = cropRect.size.height/height;
            r.size.height = cropRect.size.width/size.width;
        } else {
            CGFloat width = size.height * (1./p2);
            CGFloat padding = (size.width - width)/2;
            
            r.origin.x = CGRectGetMinY(cropRect)/size.height ;
            r.origin.y = (CGRectGetMinX(cropRect) - padding)/width ;
            r.size.width = cropRect.size.height/size.height ;
            r.size.height = cropRect.size.width/width ;
        }

参考文章 iOS 二维码有效区域rectOfInterest详解

[iOS] 图文讲解原生二维码有效扫描区域 rectOfInte

1. 启动扫描卡顿

需要注意

2. AVCaptureMetadataOutput 有效扫描区域 rectOfInterest

2.1. 影响因素

2.2. 转换关系

2.2.1. 竖屏, `Home` 键在下 (`UIInterfaceOrientationPortrait`)

2.2.2. 横屏, `Home` 键在右 (`UIInterfaceOrientationLandscapeRight`)

2.2.3. 横屏, `Home` 键在左 (`UIInterfaceOrientationLandscapeLeft`)

2.2.4. 竖屏, `Home` 键在上(`UIInterfaceOrientationPortraitUpsideDown`)

2.3. 其他图像填充模式转换

2.3.1. 竖屏, Home 键在下

2.3.2. 横屏, Home 键在右

2.3.3. 横屏, Home 键在左

2.3.4. 竖屏, Home 键在上

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS Learning

[iOS] 图文讲解原生二维码有效扫描区域 rectOfInte

1. 启动扫描卡顿

需要注意

2. AVCaptureMetadataOutput 有效扫描区域 rectOfInterest

2.1. 影响因素

2.2. 转换关系

2.2.1. 竖屏, Home 键在下 (UIInterfaceOrientationPortrait)

2.2.2. 横屏, Home 键在右 (UIInterfaceOrientationLandscapeRight)

2.2.3. 横屏, Home 键在左 (UIInterfaceOrientationLandscapeLeft)

2.2.4. 竖屏, Home 键在上(UIInterfaceOrientationPortraitUpsideDown)

2.3. 其他图像填充模式转换

2.3.1. 竖屏, Home 键在下

2.3.2. 横屏, Home 键在右

2.3.3. 横屏, Home 键在左

2.3.4. 竖屏, Home 键在上

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS Learning

2.2.1. 竖屏, `Home` 键在下 (`UIInterfaceOrientationPortrait`)

2.2.2. 横屏, `Home` 键在右 (`UIInterfaceOrientationLandscapeRight`)

2.2.3. 横屏, `Home` 键在左 (`UIInterfaceOrientationLandscapeLeft`)

2.2.4. 竖屏, `Home` 键在上(`UIInterfaceOrientationPortraitUpsideDown`)