模仿Sip Color App之实时从摄像头拾取颜色及功能完善

最近工作实在是太忙，没有时间更新代码，周末抽时间把代码整理了一下，已传到GitHub：YLSipColor

喜欢的请给个Star表示鼓励，同时大家如果发现问题，欢迎提给我。

好了，接着上一篇大致讲一下一些技术上的实现思路。上一篇已经讲过如何从摄像头捕获图片，然后拾取图片上的颜色。那么，我们如何实现实时从摄像头捕获图片呢，那就需要我们利用手机传感器了。我们可以结合陀螺仪（或叫重力感应）和加速计的传感器，监听到手机发生旋转或位置发生偏移，那就表示我们手机摄像头的画面将发生变换，这个时候我们就从摄像头再次获取一下图片就好了。

关于陀螺仪和加速计的使用，这已不是新鲜的技术了，网上有大量这方面的文章，大家可以自行了解。下面简单介绍下我这里怎么使用的：

_motionManager = [[CMMotionManager alloc]init];

    //判断加速度是否可用  监听平移

    if([_motionManager isAccelerometerAvailable] && ![_motionManager isAccelerometerActive]){

        //更新频率

        _motionManager.accelerometerUpdateInterval = 1;

        NSOperationQueue *queue = [[NSOperationQueue alloc]init];

        //push方式获取和处理数据

        [_motionManager startAccelerometerUpdates];

        [_motionManager startAccelerometerUpdatesToQueue:queue

                                             withHandler:^(CMAccelerometerData * _Nullable accelerometerData, NSError * _Nullable error) {

            if(_sessionPaused){

                return;

            }

            if(!_currentAccelerometerData ||

               fabs(_currentAccelerometerData.acceleration.x - accelerometerData.acceleration.x) >= 0.1 ||

               fabs(_currentAccelerometerData.acceleration.y - accelerometerData.acceleration.y) >= 0.1 ||

               fabs(_currentAccelerometerData.acceleration.z - accelerometerData.acceleration.z) >= 0.1){

                [self captureImageFromBuffer];

            }

            _currentAccelerometerData = accelerometerData;

        }];

    }

    //判断陀螺仪是否可用 监听旋转

    if([_motionManager isGyroAvailable] && ![_motionManager isGyroActive]){

        _motionManager.gyroUpdateInterval = 1;

        NSOperationQueue *queue = [[NSOperationQueue alloc]init];

        [_motionManager startGyroUpdatesToQueue:queue

                                    withHandler:^(CMGyroData * _Nullable gyroData, NSError * _Nullable error) {

            if(_sessionPaused){

                return;

            }

            if(!_currentGyroData ||

               fabs(_currentGyroData.rotationRate.x - gyroData.rotationRate.x) >= 0.1 ||

               fabs(_currentGyroData.rotationRate.y - gyroData.rotationRate.y) >= 0.1 ||

               fabs(_currentGyroData.rotationRate.z - gyroData.rotationRate.z) >= 0.1){

                [self captureImageFromBuffer];

            }

            _currentGyroData = gyroData;

        }];

    }

为了达到实时的效果，我这里采用的是实时拉取数据，虽然图片一直在生成，但是我可以控制什么时候采用生成的图片，什么时候不采用。拿到颜色之后，剩下的就是页面展示与刷新，页面之间数据的传递等等细节问题了。这周末把这些细节问题也处理了一下。

然后再讲一讲如何实现下图所示的颜色编辑页面的UISlider吧：

editView.png

编辑颜色时，在颜色透明的时候，需要像PS画布那样展示一个默认的样式，然后颜色发生任何改变时，UISlider的track也跟着变化，而且是渐变色。我们如果直接设置UISlider的currentMinimumTrackImage和currentMaximumTrackImage效果并不是很理想，在任何颜色值发生改变时要生成渐变色的图片，这样子展示的效果会有点抖动不顺滑。我这里采用的方式是先给UISlider设置一个背景图，这里背景图是绘制一个带圆角而且是虚线的样式，用在alpha < 1时的展示，然后再在这个背景图上添加一个图层用于展示渐变色，基本达到了顺畅的效果。注意比如Hue的UISlider，渐变色的取值从hue值为0开始，UISlider当前值为中心点，hue值为1为终点绘制渐变色。

生成渐变色：

- (void)refreshSliderGradientColor

{

    CGFloat hue = _hueSlider.value;

    CGFloat saturation = _saturationSlider.value;

    CGFloat brightness = _brightSlider.value;

    CGFloat alpha = _alphaSlider.value;

    UIColor *nowColor = [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:alpha];

    UIColor *hStartColor = [UIColor colorWithHue:0 saturation:saturation brightness:brightness alpha:alpha];

    UIColor *hEndColor = [UIColor colorWithHue:1.0 saturation:saturation brightness:brightness alpha:alpha];

    _hueLayer.colors = @[(__bridge id)hStartColor.CGColor, (__bridge id)nowColor.CGColor, (__bridge id)hEndColor.CGColor];

    _hueLayer.locations = @[@0.0, @(hue), @1.0];

    UIColor *sStartColor = [UIColor colorWithHue:hue saturation:0 brightness:brightness alpha:alpha];

    UIColor *sEndColor = [UIColor colorWithHue:hue saturation:1.0 brightness:brightness alpha:alpha];

    _saturationLayer.colors = @[(__bridge id)sStartColor.CGColor, (__bridge id)nowColor.CGColor, (__bridge id)sEndColor.CGColor];

    _saturationLayer.locations = @[@0.0, @(saturation), @1.0];

    UIColor *bStartColor = [UIColor colorWithHue:hue saturation:saturation brightness:0 alpha:alpha];

    UIColor *bEndColor = [UIColor colorWithHue:hue saturation:saturation brightness:1.0 alpha:alpha];

    _brightLayer.colors = @[(__bridge id)bStartColor.CGColor, (__bridge id)nowColor.CGColor, (__bridge id)bEndColor.CGColor];

    _brightLayer.locations = @[@0.0, @(brightness), @1.0];

    UIColor *aStartColor = [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:0];

    UIColor *aEndColor = [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1.0];

    _alphaLayer.colors = @[(__bridge id)aStartColor.CGColor, (__bridge id)nowColor.CGColor, (__bridge id)aEndColor.CGColor];

    _alphaLayer.locations = @[@0.0, @(alpha), @1.0];

}

生成虚线的方法见YLDashLine文件

效果图：

pick_color_from_camra.gif

好了，这篇就到这里了。接下来需要做的就是一些细节和优化点了。如果需要，我还会再另看一篇出来。欢迎微信搜索猿故” or "ApesTalk" or 扫码关注我，谢谢支持！

image