最近工作实在是太忙,没有时间更新代码,周末抽时间把代码整理了一下,已传到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吧:
编辑颜色时,在颜色透明的时候,需要像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文件
效果图: