模仿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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,014评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,796评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,484评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,830评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,946评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,114评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,182评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,927评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,369评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,533评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,166评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2 351

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,067评论 4 62
  • 推荐相关书籍:《股票:长线法宝》、《领导革命》《邻家的百万富翁》《复制猫营销101》 当我们每天忙于处理各种事情及...
    新小派自由行走的花阅读 269评论 0 0
  • 今天是中秋节,在中国人来讲是比较重要的家人团聚的日子。我也不例外,很期盼与家人的团聚。 可是,节日我总得在婆家忙活...
    锦墨hhy阅读 403评论 0 0
  • 4.4 辩论赛因你的缺席失掉一半胜算。我不知道我们能否不负众望,但至少现在,我还没有把握。又更深刻的感到,我们不能...
    roll阅读 214评论 0 1
  • 不过竞品们的动作却正好相反。市面上各家资源聚合类VR APP几乎都推出了长片电影资源,优酷VR更是在7月28日的新...
    起小点2016阅读 356评论 0 0