// // HDLwaveSeekBar.m // HDL_Widget_iOS // // Created by HDL on 2019/8/27. // Copyright © 2019 JLChen. All rights reserved. // #import "HDLWaveSeekBar.h" #import "HDLUtlisXM.h" #define APP_DEFAULT_BG [UIColor colorWithRed:72/255.0f green:72/255.0f blue:73/255.0f alpha:1.0f] #define APP_DEFAULT_BG_LINE [UIColor colorWithRed:73/255.0f green:87/255.0f blue:128/255.0f alpha:1.0f] //#define APP_DEFAULT_BAR [UIColor colorWithRed:252/255.0f green:59/255.0f blue:62/255.0f alpha:0.8f] #define DEFAULT_WAVE_COLOR HEXCOLOR(0xFD692E) #define DEFAULT_WAVE_END_COLOR HEXCOLOR(0xFB3140) #define ToRad(deg) ( (M_PI * (deg)) / 180.0 ) #define ToDeg(rad) ( (180.0 * (rad)) / M_PI ) #define SQR(x) ( (x) * (x) ) #define GETEndAngle(X) ( ((90-X) < 0) ? ((90-X)+360) : (90-X) ) #define GETStartAngle(X) ( 90 + X) //#define DEFAULT_DISTANCE_BETWEEN_TEXTPOINT_AND_ARC 30 // 进度显示文字坐标与进度圆弧的距离 #define DEFAULT_PADDING 5 //圆弧自带PADDING值，为了显示进度test文字 #define DEFAULT_OPEN_ANGLE 30.0f // 开口角度 @interface HDLWaveSeekbar () /** 是否正在移动 */ @property (nonatomic, assign) BOOL bTouchMove; /** 进度单位符号 */ @property (nonatomic, strong) NSString *mProgressBarUnitSring; /** 最小值 */ @property (nonatomic, assign) float mMinValue; /** 最大值 */ @property (nonatomic, assign) float mMaxValue; /** 进度渐变颜色数组 */ @property (nonatomic, strong) NSArray *mWaveProgressBarColors; /** 背景线宽 */ @property (nonatomic, assign) int mBackLineWidth; /** 边距 */ @property (nonatomic, assign) int WavePadding; @end @implementation HDLWaveSeekbar{ int _mMoveCount; CGPoint _mCenterPoint; //圆心坐标 bool _bIsInWaveProgress; CGFloat _mWaveHeight; CGFloat _mWaveWidth; CGFloat _mWaveStartX; CGFloat _mWaveEndX; CGFloat _waveA; // A CGFloat _waveW; // ω // CGFloat _offsetF; // φ firstLayer // CGFloat _offsetS; // φ secondLayer CGFloat _currentK; // k float _mPercent; CGFloat _mWavePadding; CGFloat _mCurtainY; } -(instancetype)initWithFrame:(CGRect)frame{ self = [super initWithFrame:frame]; if (self) { _isClickable = YES; _mMoveCount = 0; _mProgress = 0; _mPercent = 0; _mMaxValue = 100.0f; _mMinValue = 0.0f; _mBackLineWidth = 2; _mCornerRadius = 10; _WavePadding = 10; _mProgressTextColor = [UIColor blackColor]; _mProgressTextSize = 15; _mProgressBarUnitSring = @"%"; _mWaveBorderColor = APP_DEFAULT_BG_LINE; _isProgressTextShow = YES; // _mWaveProgressBarColor = APP_DEFAULT_BAR; _waveA = 6.0f; // [self setProgressBarColor:APP_DEFAULT_BAR]; _mWaveProgressBarColors = @[ (id) DEFAULT_WAVE_COLOR.CGColor, (id)DEFAULT_WAVE_END_COLOR.CGColor ]; [self refreshFrame]; self.backgroundColor = [UIColor clearColor]; } return self; } /** 刷新布局，更新关键值 */ -(void)refreshFrame{ _mCenterPoint = CGPointMake(self.frame.size.width/2, self.frame.size.height/2); _mWavePadding = _WavePadding*2 + _mBackLineWidth; _mWaveHeight = self.frame.size.height - _mWavePadding*2; _mWaveWidth = self.frame.size.width - _mWavePadding*2; _mWaveStartX = _mWavePadding; _mWaveEndX = _mWaveWidth + _mWaveStartX; } #pragma mark drawRect 绘制图形 -(void)drawRect:(CGRect)rect{ [super drawRect:rect]; CGContextRef ctx = UIGraphicsGetCurrentContext(); //将当前图形状态推入堆栈 CGContextSaveGState(ctx); //*********绘制边框背景********* [self drawBorderPath:ctx]; //*********绘制动态的进度条********* [self drawProgressBar:ctx]; //*********绘制显示进度值文字********* [self drawProgressText:ctx]; // [self drawArcWithGradient:ctx rect:rect];//绘制渐变效果 //把堆栈顶部的状态弹出 CGContextRestoreGState(ctx); } /** 绘制边框 @param ctx 画布 */ -(void)drawBorderPath:(CGContextRef)ctx{ CGRect drawRect = {_WavePadding+_mBackLineWidth/2, _WavePadding+_mBackLineWidth/2, self.frame.size.width-_WavePadding*2-_mBackLineWidth, self.frame.size.height-_WavePadding*2-_mBackLineWidth}; UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:drawRect cornerRadius:_mCornerRadius]; path.lineWidth = _mBackLineWidth; //线宽 path.lineCapStyle = kCGLineCapRound; //弯角样式 path.lineJoinStyle = kCGLineJoinBevel; //交点的样式 [_mWaveBorderColor set]; CGContextSetLineWidth(ctx, _mBackLineWidth); CGContextAddPath(ctx, path.CGPath); CGContextDrawPath(ctx, kCGPathStroke); // [path stroke]; //边框线颜色 } /* y = Asin(ωx+φ)+k A表示振幅，使用这个变量来调整波浪的高度 ω表示频率，使用这个变量来调整波浪密集度 φ表示初相，使用这个变量来调整波浪初始位置 k表示高度，使用这个变量来调整波浪在屏幕中y轴的位置。 */ /** 绘制进度条 @param ctx 画布 */ -(void)drawProgressBar:(CGContextRef)ctx{ //*******绘制剪裁限制显示区域********* CGRect drawRect2 = CGRectMake(_mWaveStartX, _mWavePadding , _mWaveWidth, _mWaveHeight ); UIBezierPath *path2 = [UIBezierPath bezierPathWithRoundedRect:drawRect2 cornerRadius:_mCornerRadius];; CGContextAddPath(ctx, path2.CGPath); // 剪裁路径 CGContextClip(ctx); //*******绘制剪裁限制显示区域********* CGFloat y = _mWaveHeight - _mPercent * _mWaveHeight + _mWavePadding; _mCurtainY = y; CGContextBeginPath( ctx ); //1、添加第一点 CGContextMoveToPoint( ctx, _mWaveStartX, y ); CGFloat h = y; if(_mPercent>0 && _mPercent<1){ //2、添加水波浪效果，正玄函数 来计算每一个像素的坐标 for (int i = _mWaveStartX; i <= _mWaveEndX; ++i) { y= h + _waveA * sin((i+h)*M_PI/60); CGContextAddLineToPoint(ctx, i, y); } CGContextAddLineToPoint(ctx, _mWaveEndX, _mWavePadding + _mWaveHeight); CGContextAddLineToPoint(ctx, _mWaveStartX, _mWavePadding + _mWaveHeight); }else{ //起点-终点 CGPoint pointsRect[4] = {CGPointMake(_mWaveStartX, h),CGPointMake(_mWaveStartX, _mWavePadding + _mWaveHeight), CGPointMake(_mWaveEndX, _mWavePadding + _mWaveHeight),CGPointMake(_mWaveEndX, h)}; CGContextAddLines(ctx, pointsRect, 4); } [self drawArcWithGradient:ctx rect:drawRect2]; // CGContextClosePath(ctx); // // CGContextSetFillColorWithColor( ctx, _mWaveProgressBarColor.CGColor ); // //// CGContextSetStrokeColorWithColor( ctx, APP_DEFAULT_BAR.CGColor ); // //// CGContextSetLineWidth( ctx, 1 ); // // CGContextDrawPath( ctx, kCGPathFill ); } /** 绘制进度显示值文字 @param ctx 画布 */ -(void)drawProgressText:(CGContextRef)ctx{ if(_isProgressTextShow){ if(_mPercent > 0.6){ _mProgressTextColor = [UIColor whiteColor]; }else{ _mProgressTextColor = [UIColor blackColor]; } [self drawString:[NSString stringWithFormat:@"%d%@", _mProgress, _mProgressBarUnitSring] outsidePoint:_mCenterPoint]; } } /** drawString 现在当前进度值 @param mText 显示文本 @param outsidePoint 坐标 */ - (void) drawString:(NSString *)mText outsidePoint:(CGPoint)outsidePoint{ NSMutableParagraphStyle *paragraph = [[NSMutableParagraphStyle alloc] init]; paragraph.alignment = NSTextAlignmentCenter; NSDictionary *dic = @{NSFontAttributeName : [UIFont systemFontOfSize:_mProgressTextSize], NSForegroundColorAttributeName : _mProgressTextColor, NSParagraphStyleAttributeName : paragraph }; // CGRect textRect = CGRectMake(outsidePoint.x, outsidePoint.y, 80, 20); // [mText drawInRect:textRect withAttributes:dic]; //2019-08-15 修改文字绘制方法，最终实现文本居中效果 CGSize textSize = [mText sizeWithAttributes:dic]; CGPoint textPoint = CGPointMake(outsidePoint.x - textSize.width/2, outsidePoint.y - textSize.height/2);//根据中点坐标绘制 [mText drawAtPoint:textPoint withAttributes:dic]; } /** 绘制渐变效果 */ -(void)drawArcWithGradient:(CGContextRef)ctx rect:(CGRect)rect{ // 创建一个渐变色 // 创建RGB色彩空间，创建这个以后，context里面用的颜色都是用RGB表示 CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)_mWaveProgressBarColors, NULL); // 释放色彩空间 CGColorSpaceRelease(colorSpace); colorSpace = NULL; // 剪裁路径 CGContextClip(ctx); // 用渐变色填充 CGContextDrawLinearGradient(ctx, gradient, CGPointMake(rect.origin.x, rect.origin.y), CGPointMake(rect.origin.x+rect.size.width, rect.origin.y+rect.size.height), 0); // 释放渐变色 CGGradientRelease(gradient); gradient = NULL; CGContextRestoreGState(ctx);// 恢复到之前的context CGContextSaveGState(ctx); } ///** // 计算2点坐标之间的距离 // // @param startPoint 起点坐标 // @param endPonit 终点坐标 // @return 距离 // */ //-(float) getTwoPointDistance:(CGPoint)startPoint endPonit:(CGPoint)endPonit{ // CGPoint v = CGPointMake(startPoint.x - endPonit.x, startPoint.y - endPonit.y); // float d = sqrt(SQR(v.x) + SQR(v.y)); // NSLog(@"2点距离:%f ", d); // return d; // //} #pragma mark Touch Event 点击事件 -(BOOL) beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event { [super beginTrackingWithTouch:touch withEvent:event]; if(!_isClickable) return YES;//禁止点击 _bTouchMove = NO; _mMoveCount = 0; // CGPoint startPoint = [touch locationInView:self]; // _bIsInArcProgress = [self getStartPointIsInArcProgress:startPoint];//判断开始坐标是否在可点击区域 _bIsInWaveProgress = YES;//不限制点击区域 [self.mProgressChangedDelegate onStartTrackingTouch]; return YES; } -(void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event{ [super endTrackingWithTouch:touch withEvent:event]; if(!_isClickable) return;//禁止点击 if(!_bTouchMove){//没移动，仅点击 CGPoint lastPoint = [touch locationInView:self]; [self getCurrentProgressWithLastPoint:lastPoint]; [self sendActionsForControlEvents:UIControlEventValueChanged]; } [self.mProgressChangedDelegate onStopTrackingTouch:_mProgress]; } -(BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event { [super continueTrackingWithTouch:touch withEvent:event]; if(!_isClickable) return YES;//禁止点击 if(_mMoveCount < 2){ _mMoveCount++; }else{ _bTouchMove = YES; //开始移动 } if(_bIsInWaveProgress){//如果刚开始点击的坐标在可点击区域 CGPoint lastPoint = [touch locationInView:self]; [self getCurrentProgressWithLastPoint:lastPoint]; } [self sendActionsForControlEvents:UIControlEventValueChanged]; return YES; } ///** // 判断最后离开坐标是否在可点击区域 // // @param lastPoint 最后的坐标 // */ //-(void)getEndPointIsInArcProgress:(CGPoint)lastPoint { // [self getCurrentProgressWithLastPoint:lastPoint]; //} /** 根据坐标计算出当前进度百分比和对应的进度值 @param point 当前坐标 */ -(void)getCurrentProgressWithLastPoint:(CGPoint)point { _mPercent = (point.y - 10 - _mBackLineWidth ) / _mWaveHeight; // NSLog(@"point.y:%f _mWaveHeight:%f",point.y,_mWaveHeight); // NSLog(@"_mPercent:%f",_mPercent); // if(_mPercent > 1){ _mPercent = 1; }else if(_mPercent < 0){ _mPercent = 0; } _mPercent = 1 - _mPercent; _mProgress = _mPercent * (_mMaxValue - _mMinValue) + _mMinValue; if(_bTouchMove){ [self.mProgressChangedDelegate onProgressChanged:_mProgress]; } [self setNeedsDisplay]; } /** 根据进度值，计算当前 _mProgressAngle值 @param mProgress 进度值 */ -(void)setSeekBarProgressToValue:(int)mProgress{ if(mProgress < _mMinValue){ mProgress = _mMinValue; } if(mProgress > _mMaxValue){ mProgress = _mMaxValue; } _mProgress = mProgress; _mPercent = (_mProgress - _mMinValue) / (_mMaxValue - _mMinValue); // [self.mProgressChangedDelegate onProgressChanged:_mProgress]; } #pragma mark 设置进度条位置 /** 设置进度值 @param mProgress 进度值 */ -(void)setProgress:(int)mProgress{ [self setSeekBarProgressToValue:mProgress]; [self setNeedsDisplay]; } /** 设置进度显示值单位 @param mString 单位字符 */ -(void)setProgressBarUnitSring:(NSString *)mString{ _mProgressBarUnitSring = mString; } /** 设置最大值最小值 @param mMinValue 最小值 @param mMaxValue 最大值 */ -(void)setMinAndMaxValue:(float)mMinValue mMaxValue:(float)mMaxValue{ if(mMinValue < mMaxValue){ _mMinValue = mMinValue; _mMaxValue = mMaxValue; }else{ _mMinValue = mMaxValue; _mMaxValue = mMinValue; } _mProgress = _mMinValue; _mPercent = 0.0f; } /** 重置布局 @param mCGRect 布局 */ -(void)initWithFrameWaveSeekBar:(CGRect) mCGRect{ self.frame = mCGRect; [self refreshFrame]; } // ///** // 设置渐变效果 // // @param mColors 颜色数组 // */ //-(void)setProgressBarColors:(NSArray *)mColors{ // // // NSArray * colors = [NSArray arrayWithObjects：（id）startColor.CGColor，（id）endColor.CGColor，nil]; // //} /** 设置渐变效果 @param startColor 开始颜色 @param endColor 结束颜色 */ -(void)setProgressBarColors:(UIColor *)startColor endColor:(UIColor*)endColor{ // _mArcProgressBarColors = [NSArray arrayWithObjects（id）startColor.CGColor，（id）endColor.CGColor，nil]; _mWaveProgressBarColors = @[ (id)startColor.CGColor, (id)endColor.CGColor ]; } /** 设置进度条颜色 单一颜色 @param oneColor 单一颜色 */ -(void)setProgressBarColor:(UIColor *)oneColor{ // // _mArcProgressBarColors = [NSArray arrayWithObjects（id）startColor.CGColor，（id）endColor.CGColor，nil]; _mWaveProgressBarColors = @[ (id)oneColor.CGColor, (id)oneColor.CGColor ]; // _mWaveProgressBarColor = oneColor; } /** 设置边距 */ -(void)setWavePadding:(int)Padding{ _WavePadding = Padding; [self onWaveSizeChange]; } /** 设置背景边框宽度 */ -(void)setBorderWidth:(int)borderWidth{ _mBackLineWidth = borderWidth; [self onWaveSizeChange]; } /** 获取高度 Y值 */ -(CGFloat)getProgressY{ return _mCurtainY; } /** 刷新布局，更新关键值 */ -(void)onWaveSizeChange{ _mWavePadding = _WavePadding*2 + _mBackLineWidth; _mWaveHeight = self.frame.size.height - _mWavePadding*2; _mWaveWidth = self.frame.size.width - _mWavePadding*2; _mWaveStartX = _mWavePadding; _mWaveEndX = _mWaveWidth + _mWaveStartX; } @end