效果图
效果图
思路
1.自定义DIYSlider继承UIControl,因为UIControl方便监听手势触摸到上面开始，滑动中和结束三个状态。
2.在DIYSlider中的- (void)drawRect:(CGRect)rect方法中先将弧线划出来。
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, 0.0, self.bounds.size.height); //改变画布位置（0，0位置移动到此处）
CGContextScaleCTM(context, 1.0, -1.0);
CGContextSetLineWidth(context, self.lineWidth);
CGPoint center = CGPointMake(CGRectGetMaxX(self.bounds) + 3, CGRectGetMidY(self.bounds));
CGFloat radius = CirCleradius;
CGFloat arcStartAngle = DegreesToRadians(self.startAngle);
CGFloat progressAngle = DegreesToRadians((self.startAngle + 180) + 60) * self.progress;
CGFloat arcEndAngle = arcStartAngle - progressAngle;
[self.guideLineColor set];
CGContextAddArc(context, center.x, center.y, radius, arcStartAngle, arcEndAngle, 1);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextStrokePath(context);
CGPoint handle = CGPointCenterRadiusAngle(center, radius , arcStartAngle - progressAngle);
_handcenterPoint = handle;
CGContextSaveGState(context);
CGContextDrawImage(context, CGRectMake(handle.x - _handleInSideRadius, handle.y - _handleInSideRadius, _handleInSideRadius * 2, _handleInSideRadius * 2), [UIImage imageNamed:@"椭圆3拷贝+"].CGImage);
CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);//填充颜色
CGContextRestoreGState(context);
}
注意点:iOS设备的坐标系原点在左上角，x向右增加，y向下增加。圆的坐标系坐标原点在圆心，x向右增加，y向上增加。
3.在-(BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
-(void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
三个事件中监听手势落下的点，在第一个方法中监听落下的点是否在弧线上的起始小圆上（这里的判断范围要增大2-4倍，优化实际用户体验），这里设定一个全局BOOL变量canScroll,如果手势落下的开始点在小圆范围上，canScroll为YES
-(BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event{
[super beginTrackingWithTouch:touch withEvent:event];
_location = [touch locationInView:self];
CGPoint handleCenter = CGPointMake(_handcenterPoint.x, JZHEIGHT(300) - _handcenterPoint.y) ;
CGFloat handleRadius = _handleInSideRadius;
CGRect handleRect = CGRectMake(handleCenter.x - 3*handleRadius, handleCenter.y - 2*handleRadius, handleRadius * 6, handleRadius * 5);
self.canScroll = CGRectContainsPoint(handleRect, _location);
return YES;
}
第二个方法中先判断canScroll是否可以滑动，然后找到在DIYSlider上落下的点到圆心的弧度，找到起始点到圆心的弧度，然后计算出弧度差，将弧度差转化为角度差，通过角度差计算出弧线滑动的比例，这个比例赋值给自己定义的一个progress的属性。
- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event {
[super continueTrackingWithTouch:touch withEvent:event];
if (self.canScroll == YES) {
_location = [touch locationInView:self];
[self drawWithLocation:_location with:1];
}
return YES;
}
第三个方法，将canScroll设置成NO,表示一个弧线滑动动作结束。
3.整体思路总结，监听手势，判断在设定的范围内，计算出手势所在弧度为结束弧度点，在drawRect方法中进行画弧线，达到滑动弧线的效果。
网友评论