我想知道如何在附图中做一个双滑块。
我正在查看此代码以对其进行修改。我想知道如何让 2 个滑块让用户选择所需的时间。
我遇到的问题是我如何有 2 个滑块来显示类似图像的内容?
http://www.cocoacontrols.com/controls/tb_circularslider
任何评论都非常感谢这里。
我想知道如何在附图中做一个双滑块。
我正在查看此代码以对其进行修改。我想知道如何让 2 个滑块让用户选择所需的时间。
我遇到的问题是我如何有 2 个滑块来显示类似图像的内容?
http://www.cocoacontrols.com/controls/tb_circularslider
任何评论都非常感谢这里。
对于双滑块位置,您在代码中有此摘录
CGContextAddArc(imageCtx, self.frame.size.width/2 , self.frame.size.height/2, radius, 0, ToRad(self.angle), 0);
第一个零 ( 0
) 是起点,因此您想在此处使用不同的角度
CGContextAddArc(imageCtx, self.frame.size.width/2 , self.frame.size.height/2, radius, ToRad(self.startAngle), ToRad(self.endAngle), 0);
(当然,您的标题中需要这两个 ivar)
编辑:这是找到最近的旋钮并将其锁定以进行修改的编辑代码。旧代码没有锁定它,所以它会在从一个旋钮悬停到另一个旋钮时改变。
首先添加enum
上面你的实现:
enum SliderLockType {
SliderLockedNone = 0,
SliderLockedStart,
SliderLockedEnd
};
#pragma mark - Implementation -
@implementation TBCircularSlider
enum SliderLockType sliderLock;
// … some code here …
//Initialize the Angle at 0
//self.startAngle = 0;
//self.endAngle = 270;
/** Tracking is started **/
-(BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event{
[super beginTrackingWithTouch:touch withEvent:event];
// find nearest knob …
CGPoint lastPoint = [touch locationInView:self];
CGPoint pStart = [self centerPointFromAngel:self.startAngle];
CGPoint pEnd = [self centerPointFromAngel:self.endAngle];
float diffA = [self distanceBetween:lastPoint and:pStart];
float diffB = [self distanceBetween:lastPoint and:pEnd];
// … and lock it
if (diffA <= TB_LINE_WIDTH) { // the tolerance is the width of the circle
sliderLock = SliderLockedStart;
} else if (diffB <= TB_LINE_WIDTH) {
sliderLock = SliderLockedEnd;
}
//We need to track continuously
return YES;
}
// continueTrackingWithTouch:withEvent: stays unchanged
/** Track is finished **/
-(void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event{
[super endTrackingWithTouch:touch withEvent:event];
// reset the lock before starting a new touch event
sliderLock = SliderLockedNone;
}
- (CGPoint)centerPointFromAngel:(int)angleInt {
CGPoint point = [self pointFromAngle:angleInt];
point.x += TB_LINE_WIDTH/2;
point.y += TB_LINE_WIDTH/2;
return point;
}
- (CGFloat)distanceBetween:(CGPoint)p1 and:(CGPoint)p2 {
CGFloat xDist = (p2.x - p1.x);
CGFloat yDist = (p2.y - p1.y);
return sqrt((xDist * xDist) + (yDist * yDist));
}
// … some more code …
- (void)drawTheHandle:(CGContextRef)ctx {
CGContextSaveGState(ctx);
//I Love shadows
CGContextSetShadowWithColor(ctx, CGSizeMake(0, 0), 3, [UIColor blackColor].CGColor);
//Get the handle position!
CGPoint handleCenterA = [self pointFromAngle: self.startAngle];
CGPoint handleCenterB = [self pointFromAngle: self.endAngle];
//Draw It!
[[UIColor colorWithWhite:1.0 alpha:0.7]set];
CGContextFillEllipseInRect(ctx, CGRectMake(handleCenterA.x, handleCenterA.y, TB_LINE_WIDTH, TB_LINE_WIDTH));
CGContextFillEllipseInRect(ctx, CGRectMake(handleCenterB.x, handleCenterB.y, TB_LINE_WIDTH, TB_LINE_WIDTH));
CGContextRestoreGState(ctx);
}
- (void)movehandle:(CGPoint)lastPoint {
//Get the center
CGPoint centerPoint = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);
//Calculate the direction from the center point to an arbitrary position.
float currentAngle = AngleFromNorth(centerPoint, lastPoint, NO);
int angleInt = 360 - floor(currentAngle);
if (sliderLock == SliderLockedStart) {
self.startAngle = angleInt;
} else if (sliderLock == SliderLockedEnd) {
self.endAngle = angleInt;
}
//Redraw
[self setNeedsDisplay];
}
结果:
EDIT2:如果您想让滑块从一个小时切换到另一个小时,您可以修改movehandle:
方法如下:
int angleInt = (int)(360 - floor(currentAngle)) / 30 * 30; // 360/30 = 12 -> hours
if (sliderLock == SliderLockedStart && angleInt%360 != self.endAngle%360) {
self.startAngle = angleInt;
} else if (sliderLock == SliderLockedEnd && angleInt%360 != self.startAngle%360) {
self.endAngle = angleInt;
}