2012-05-02 85 views
8

我正在嘗試實現自定義滑塊,如下圖所示。使用核心圖形繪製浮雕圓弧

enter image description here

是我迄今所做的看起來像這樣

enter image description here

請幫我出了這樣的效果圖弧。我的代碼如下所示,我正在做的是用線寬爲kLineWidth的CGContextAddArc繪製圓弧。

- (void)drawThumbAtPoint:(CGPoint)sliderButtonCenterPoint inContext: (CGContextRef)context { 
UIGraphicsPushContext(context); 
CGContextBeginPath(context); 

CGContextMoveToPoint(context, sliderButtonCenterPoint.x, sliderButtonCenterPoint.y); 

CGImageRef imageRef = [UIImage imageNamed:@"circle25.png"].CGImage; 
CGRect rect = CGRectMake(sliderButtonCenterPoint.x - kThumbRadius, sliderButtonCenterPoint.y - kThumbRadius, kThumbRadius*2, kThumbRadius*2); 
CGContextDrawImage(context, rect, imageRef); 

//CGContextAddArc(context, sliderButtonCenterPoint.x, sliderButtonCenterPoint.y, kThumbRadius, 0.0, 2*M_PI, NO); 

CGContextFillPath(context); 
UIGraphicsPopContext(); 
} 

- (CGPoint)drawArcTrack:(float)track atPoint:(CGPoint)center withRadius:(CGFloat)radius inContext:(CGContextRef)context { 
UIGraphicsPushContext(context); 
CGContextBeginPath(context); 

float angleFromTrack = translateValueFromSourceIntervalToDestinationInterval(track, self.minimumValue, self.maximumValue, 0, M_PI/3);// 2*M_PI 

CGFloat startAngle = (4*M_PI)/3; 
CGFloat endAngle = startAngle + angleFromTrack; 

CGContextAddArc(context, center.x, center.y, radius, startAngle, endAngle, NO); 

CGPoint arcEndPoint = CGContextGetPathCurrentPoint(context); 

CGContextStrokePath(context); 

UIGraphicsPopContext(); 

return arcEndPoint; 
} 

- (void)drawRect:(CGRect)rect { 
    CGContextRef context = UIGraphicsGetCurrentContext(); 

    CGPoint middlePoint; 
    middlePoint.x = self.bounds.origin.x + self.bounds.size.width/2; 
middlePoint.y = self.bounds.origin.y + self.bounds.size.width; 

CGContextSetLineWidth(context, kLineWidth); 

CGFloat radius = [self sliderRadius]; 


[self.maximumTrackTintColor setStroke];   
[self drawArcTrack:self.maximumValue atPoint:middlePoint withRadius:radius inContext:context];   
[self.minimumTrackTintColor setStroke];   
self.thumbCenterPoint = [self drawArcTrack:self.value atPoint:middlePoint withRadius:radius inContext:context];  

[self.thumbTintColor setFill]; 
[self drawThumbAtPoint:self.thumbCenterPoint inContext:context]; 
} 

回答

23

除非您要動態更改形狀,否則在圖像編輯器中創建圖像可能會更好。我知道在Photoshop,Illustrator或Fireworks中創建效果很容易。

也就是說,繪圖內側陰影像,與核心圖形需要幾個步驟:

  1. 剪輯的形狀(使用例如CGContextClipCGContextClipToMask)。
  2. 製作一切道路或面具的形狀。
  3. 設置陰影參數(使用CGContextSetShadowWithColor)。
  4. 填充路徑或面罩從第2步這就引起裏面的造型影子,只繪製陰影,因爲你在步驟剪切到形狀1.

如果你做的是正確的,你可以得到一個不錯的結果是這樣的:

screen shot of arc with inner shadow

這裏是我寫得出這樣的代碼。我將它寫在自定義視圖子類的drawRect:中,但您可以輕鬆使用此代碼繪製到任何圖形上下文中。

- (void)drawRect:(CGRect)rect { 
    CGContextRef gc = UIGraphicsGetCurrentContext(); 

首先,我創建只是一個弧形的路徑:

static CGFloat const kArcThickness = 20.0f; 
    CGRect arcBounds = CGRectInset(self.bounds, 10.0f, 10.0f); 
    CGPoint arcCenter = CGPointMake(CGRectGetMidX(arcBounds), CGRectGetMidY(arcBounds)); 
    CGFloat arcRadius = 0.5f * (MIN(arcBounds.size.width, arcBounds.size.height) - kArcThickness); 
    UIBezierPath *arc = [UIBezierPath bezierPathWithArcCenter:arcCenter radius:arcRadius startAngle:-M_PI/3.0 endAngle:-2.0 * M_PI/3.0 clockwise:NO]; 

接下來,我問核芯顯卡,使一個新的路徑是arc路徑的輪廓。注意:我怎麼問它爲kArcThickness和圓線帽筆劃寬度:

CGPathRef shape = CGPathCreateCopyByStrokingPath(arc.CGPath, NULL, kArcThickness, kCGLineCapRound, kCGLineJoinRound, 10.0f); 

我還需要這條道路的倒數:包括每一個點除了shape點的路徑。它發生了(儘管我認爲它沒有記錄),CGContextCreateCopyByStrokingPathCGPathAddRect繪製在相反的方向。所以,如果我複製shape和周圍畫一個巨大的矩形,非零纏繞規則意味着,新路徑將是shape倒數:

CGMutablePathRef shapeInverse = CGPathCreateMutableCopy(shape); 
    CGPathAddRect(shapeInverse, NULL, CGRectInfinite); 

現在我可以真正開始繪製。首先,我將在形狀填充淺灰色:

CGContextBeginPath(gc); 
    CGContextAddPath(gc, shape); 
    CGContextSetFillColorWithColor(gc, [UIColor colorWithWhite:.9 alpha:1].CGColor); 
    CGContextFillPath(gc); 

接着我實際執行我上面列出的四個步驟。我必須保存圖形狀態,以便在完成後撤消剪切和陰影參數。

CGContextSaveGState(gc); { 

步驟1:夾子的形狀:

 CGContextBeginPath(gc); 
     CGContextAddPath(gc, shape); 
     CGContextClip(gc); 

步驟2:好,我也已在此步驟中,當我創建shapeInverse

步驟3:我設置陰影參數:

 CGContextSetShadowWithColor(gc, CGSizeZero, 7, [UIColor colorWithWhite:0 alpha:.25].CGColor); 

步驟4:我填補步驟2中的反轉形狀:

 CGContextBeginPath(gc); 
     CGContextAddPath(gc, shapeInverse); 
     CGContextFillPath(gc); 

現在我還原圖形狀態,其特異性地恢復剪切路徑並取消陰影參數。

} CGContextRestoreGState(gc); 

最後,我將行程shape淺灰色,使邊緣更清晰:

CGContextSetStrokeColorWithColor(gc, [UIColor colorWithWhite:.75 alpha:1].CGColor); 
    CGContextSetLineWidth(gc, 1); 
    CGContextSetLineJoin(gc, kCGLineCapRound); 
    CGContextBeginPath(gc); 
    CGContextAddPath(gc, shape); 
    CGContextStrokePath(gc); 

當然,我收拾的時候我做:

CGPathRelease(shape); 
    CGPathRelease(shapeInverse); 
} 

對於更復雜的形狀,你可以看看my answer heremy answer here

這裏的所有代碼放在一起,便於複製:

- (void)drawRect:(CGRect)rect { 
    CGContextRef gc = UIGraphicsGetCurrentContext(); 

    static CGFloat const kArcThickness = 20.0f; 
    CGRect arcBounds = CGRectInset(self.bounds, 10.0f, 10.0f); 
    CGPoint arcCenter = CGPointMake(CGRectGetMidX(arcBounds), CGRectGetMidY(arcBounds)); 
    CGFloat arcRadius = 0.5f * (MIN(arcBounds.size.width, arcBounds.size.height) - kArcThickness); 
    UIBezierPath *arc = [UIBezierPath bezierPathWithArcCenter:arcCenter radius:arcRadius startAngle:-M_PI/3.0 endAngle:-2.0 * M_PI/3.0 clockwise:NO]; 
    CGPathRef shape = CGPathCreateCopyByStrokingPath(arc.CGPath, NULL, kArcThickness, kCGLineCapRound, kCGLineJoinRound, 10.0f); 
    CGMutablePathRef shapeInverse = CGPathCreateMutableCopy(shape); 
    CGPathAddRect(shapeInverse, NULL, CGRectInfinite); 

    CGContextBeginPath(gc); 
    CGContextAddPath(gc, shape); 
    CGContextSetFillColorWithColor(gc, [UIColor colorWithWhite:.9 alpha:1].CGColor); 
    CGContextFillPath(gc); 

    CGContextSaveGState(gc); { 
     CGContextBeginPath(gc); 
     CGContextAddPath(gc, shape); 
     CGContextClip(gc); 
     CGContextSetShadowWithColor(gc, CGSizeZero, 7, [UIColor colorWithWhite:0 alpha:.25].CGColor); 
     CGContextBeginPath(gc); 
     CGContextAddPath(gc, shapeInverse); 
     CGContextFillPath(gc); 
    } CGContextRestoreGState(gc); 

    CGContextSetStrokeColorWithColor(gc, [UIColor colorWithWhite:.75 alpha:1].CGColor); 
    CGContextSetLineWidth(gc, 1); 
    CGContextSetLineJoin(gc, kCGLineCapRound); 
    CGContextBeginPath(gc); 
    CGContextAddPath(gc, shape); 
    CGContextStrokePath(gc); 

    CGPathRelease(shape); 
    CGPathRelease(shapeInverse); 
} 
+0

感謝羅布的代碼,這是非常有幫助.. – Shashank

+0

工作太棒了!非常感謝。我需要做的一件事是設置self.backgroundColor清除自定義uiview子類中有drawRect魔術。 – Chris

+0

@Shashank你是否可以將該滑塊移動到該路徑上?你能分享你的代碼嗎? – NSCry

2

檢查上述部件的全功能版本下面的代碼,它的工作(也許這是有點亂)。

#import "UIArcSlider.h" 

@interface UIArcSlider() 

@property (nonatomic) CGPoint thumbCenterPoint; 

#pragma mark - Init and Setup methods 
- (void)setup; 

#pragma mark - Thumb management methods 
- (BOOL)isPointInThumb:(CGPoint)point; 

#pragma mark - Drawing methods 
- (CGFloat)sliderRadius; 
- (void)drawThumbAtPoint:(CGPoint)sliderButtonCenterPoint inContext:(CGContextRef)context; 
- (CGPoint)drawTheArcTrack:(float)track atPoint:(CGPoint)center withRadius:(CGFloat)radius AndColor:(Boolean) isWhite inContext:(CGContextRef)context; 
- (CGPoint)drawTheLineTrack:(float)track withColor:(Boolean) isWhite inContext:(CGContextRef)context; 

@end 

#pragma mark - 
@implementation UIArcSlider 

@synthesize sliderStyle = _sliderStyle; 
- (void)setSliderStyle:(UISliderStyle)sliderStyle { 
    if (sliderStyle != _sliderStyle) { 
     _sliderStyle = sliderStyle; 
     [self setNeedsDisplay]; 
    } 
} 

@synthesize value = _value; 
- (void)setValue:(float)value { 
    if (value != _value) { 
     if (value > self.maximumValue) { value = self.maximumValue; } 
     if (value < self.minimumValue) { value = self.minimumValue; } 
     _value = value; 
     [self setNeedsDisplay]; 
     [self sendActionsForControlEvents:UIControlEventValueChanged]; 
    } 
} 
@synthesize minimumValue = _minimumValue; 
- (void)setMinimumValue:(float)minimumValue { 
    if (minimumValue != _minimumValue) { 
     _minimumValue = minimumValue; 
     if (self.maximumValue < self.minimumValue) { self.maximumValue = self.minimumValue; } 
     if (self.value < self.minimumValue)   { self.value = self.minimumValue; } 
    } 
} 
@synthesize maximumValue = _maximumValue; 
- (void)setMaximumValue:(float)maximumValue { 
    if (maximumValue != _maximumValue) { 
     _maximumValue = maximumValue; 
     if (self.minimumValue > self.maximumValue) { self.minimumValue = self.maximumValue; } 
     if (self.value > self.maximumValue)   { self.value = self.maximumValue; } 
    } 
} 

@synthesize thumbCenterPoint = _thumbCenterPoint; 

/** @name Init and Setup methods */ 
#pragma mark - Init and Setup methods 
- (id)initWithFrame:(CGRect)frame { 
    self = [super initWithFrame:frame]; 
    if (self) { 
     [self setup]; 
    } 
    return self; 
} 
- (void)awakeFromNib { 
    [self setup]; 
} 

- (void)setup { 
    self.value = 0.0; 
    self.minimumValue = 0.0; 
    self.maximumValue = 100.0; 
    self.thumbCenterPoint = CGPointZero; 

    UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapGestureHappened:)]; 
    [self addGestureRecognizer:tapGestureRecognizer]; 

    UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panGestureHappened:)]; 
    panGestureRecognizer.maximumNumberOfTouches = panGestureRecognizer.minimumNumberOfTouches; 
    [self addGestureRecognizer:panGestureRecognizer]; 
} 

/** @name Drawing methods */ 
#pragma mark - Drawing methods 
#define kLineWidth 22.0 
#define kThumbRadius 20.0 
#define kPadding 20.0 

- (CGFloat)sliderRadius { 
    CGFloat radius = self.bounds.size.width; 
    radius -= MAX(kLineWidth + kPadding, kThumbRadius + kPadding); 
    return radius; 
} 

-(CGFloat)sliderWidth {  
    return self.bounds.size.width - kThumbRadius*2; 
} 

- (void)drawThumbAtPoint:(CGPoint)sliderButtonCenterPoint inContext:(CGContextRef)context { 
    UIGraphicsPushContext(context); 
    CGContextBeginPath(context);  

    CGContextMoveToPoint(context, sliderButtonCenterPoint.x, sliderButtonCenterPoint.y); 

    CGRect rect = CGRectMake(sliderButtonCenterPoint.x - kThumbRadius, sliderButtonCenterPoint.y - kThumbRadius, kThumbRadius*2, kThumbRadius*2); 
    CGImageRef imageRef = [UIImage imageNamed:@"circle25.png"].CGImage; 

    CGContextDrawImage(context, rect, imageRef); 

    UIGraphicsPopContext();   
} 

- (CGPoint)drawTheArcTrack:(float)track atPoint:(CGPoint)center withRadius:(CGFloat)radius AndColor:(Boolean) isWhite inContext:(CGContextRef)context 
{ 
    static CGFloat const kArcThickness = kLineWidth; 
    CGPoint arcCenter = center; 
    CGFloat arcRadius = radius; 

    float angleFromTrack = translateValueFromSourceIntervalToDestinationInterval(track, self.minimumValue, self.maximumValue, 0, M_PI/3);// 2*M_PI 

    CGFloat startAngle = (4*M_PI)/3; 
    CGFloat endAngle = startAngle + angleFromTrack; 

    UIBezierPath *arc = [UIBezierPath bezierPathWithArcCenter:arcCenter radius:arcRadius startAngle:startAngle endAngle:endAngle clockwise:YES]; 

    CGPathRef shape = CGPathCreateCopyByStrokingPath(arc.CGPath, NULL, kArcThickness, kCGLineCapRound, kCGLineJoinRound, 10.0f); 
    CGMutablePathRef shapeInverse = CGPathCreateMutableCopy(shape); 
    CGPathAddRect(shapeInverse, NULL, CGRectInfinite); 

    CGPoint arcEndPoint = [arc currentPoint]; 

    CGContextBeginPath(context); 
    CGContextAddPath(context, shape); 

    if (isWhite) { 
     CGContextSetFillColorWithColor(context, [UIColor colorWithWhite:.9 alpha:1].CGColor); 
    } else {//70,172, 220 
     CGContextSetFillColorWithColor(context, [UIColor colorWithRed:70/255.0 green:172/255.0 blue:220/255.0 alpha:1].CGColor); 
    }  

    CGContextFillPath(context); 

    CGContextSaveGState(context); { 
     CGContextBeginPath(context); 
     CGContextAddPath(context, shape); 
     CGContextClip(context); 
     if (isWhite) { 
      CGContextSetShadowWithColor(context, CGSizeZero, 7, [UIColor colorWithWhite:0 alpha:.25].CGColor); 
     } else { 
      CGContextSetShadowWithColor(context, CGSizeZero, 7, [UIColor colorWithRed:85/255.0 green:183/255.0 blue:230/255.0 alpha:.25].CGColor); 
     }  
     CGContextBeginPath(context); 
     CGContextAddPath(context, shapeInverse); 
     CGContextFillPath(context); 
    } CGContextRestoreGState(context); 

    if (isWhite) { 
     CGContextSetStrokeColorWithColor(context, [UIColor colorWithWhite:.75 alpha:1].CGColor); 
    } else { 
     CGContextSetStrokeColorWithColor(context, [UIColor colorWithRed:62/255.0 green:135/255.0 blue:169/255.0 alpha:1].CGColor); 
    } 

    CGContextSetLineWidth(context, 1); 
    CGContextSetLineJoin(context, kCGLineCapRound); 
    CGContextBeginPath(context); 
    CGContextAddPath(context, shape); 
    CGContextStrokePath(context); 

    CGPathRelease(shape); 
    CGPathRelease(shapeInverse);   

    return arcEndPoint;  
} 


- (CGPoint)drawTheLineTrack:(float)track withColor:(Boolean) isWhite inContext:(CGContextRef)context 
{   
    CGFloat sliderWidth = [self sliderWidth]; 
    CGFloat xStart = self.bounds.origin.x + (self.bounds.size.width - sliderWidth)/2; 
    CGFloat lineRectX = (self.bounds.size.width - sliderWidth)/2; 
    CGFloat lineThickness = kLineWidth/2; 
    CGFloat lineRectY = (self.bounds.size.height - lineThickness)/2; 

    CGFloat xPoint = translateValueToPoint(track, xStart, self.maximumValue, sliderWidth); 
    sliderWidth = xPoint; 

    CGRect lineRect = CGRectMake(lineRectX, lineRectY, sliderWidth, lineThickness); 
    UIBezierPath *line = [UIBezierPath bezierPathWithRoundedRect:lineRect cornerRadius:lineThickness/2]; 

    CGPathRef shape = CGPathCreateCopyByStrokingPath(line.CGPath, NULL, lineThickness, kCGLineCapRound, kCGLineJoinRound, 10.0f); 
    CGMutablePathRef shapeInverse = CGPathCreateMutableCopy(shape); 
    CGPathAddRect(shapeInverse, NULL, CGRectInfinite); 

    CGPoint arcEndPoint = CGPointMake(lineRectX + xPoint, lineRectY + (lineThickness/2)); 

    CGContextBeginPath(context); 
    CGContextAddPath(context, shape); 

    if (isWhite) { 
     CGContextSetFillColorWithColor(context, [UIColor colorWithWhite:.9 alpha:1].CGColor); 
    } else {//70,172, 220 
     CGContextSetFillColorWithColor(context, [UIColor colorWithRed:70/255.0 green:172/255.0 blue:220/255.0 alpha:1].CGColor); 
    }  

    CGContextFillPath(context); 

    CGContextSaveGState(context); { 
     CGContextBeginPath(context); 
     CGContextAddPath(context, shape); 
     CGContextClip(context); 
     if (isWhite) { 
      CGContextSetShadowWithColor(context, CGSizeZero, 7, [UIColor colorWithWhite:0 alpha:.25].CGColor); 
     } else { 
      CGContextSetShadowWithColor(context, CGSizeZero, 7, [UIColor colorWithRed:85/255.0 green:183/255.0 blue:230/255.0 alpha:.25].CGColor); 
     }  
     CGContextBeginPath(context); 
     CGContextAddPath(context, shapeInverse); 
     CGContextFillPath(context); 
    } CGContextRestoreGState(context); 

    if (isWhite) { 
     CGContextSetStrokeColorWithColor(context, [UIColor colorWithWhite:.75 alpha:1].CGColor); 
    } else { 
     CGContextSetStrokeColorWithColor(context, [UIColor colorWithRed:62/255.0 green:135/255.0 blue:169/255.0 alpha:1].CGColor); 
    } 

    CGRect outlineRect = CGRectMake(lineRectX - (lineThickness/2), lineRectY - (lineThickness/2), sliderWidth + lineThickness, lineThickness * 2); 
    UIBezierPath *outline = [UIBezierPath bezierPathWithRoundedRect:outlineRect cornerRadius:lineThickness]; 
    CGContextSetLineWidth(context, 1); 
    CGContextSetLineJoin(context, kCGLineCapSquare); 
    CGContextBeginPath(context); 
    CGContextAddPath(context, outline.CGPath); 
    CGContextStrokePath(context); 

    CGPathRelease(shape); 
    CGPathRelease(shapeInverse);   

    return arcEndPoint;  
} 

- (void)drawRect:(CGRect)rect { 
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGPoint middlePoint; 

    switch (self.sliderStyle) { 
     case UISliderStyleLine: 

      [self drawTheLineTrack:self.maximumValue withColor:YES inContext:context]; 
      self.thumbCenterPoint = [self drawTheLineTrack:self.value withColor:NO inContext:context]; 

      [self drawThumbAtPoint:self.thumbCenterPoint inContext:context]; 
      break; 

     case UISliderStyleArc: 
     default: 
      middlePoint.x = self.bounds.origin.x + self.bounds.size.width/2; 
      middlePoint.y = self.bounds.origin.y + self.bounds.size.width; 

      CGFloat radius = [self sliderRadius];     
      [self drawTheArcTrack:self.maximumValue atPoint:middlePoint withRadius:radius AndColor:YES inContext:context]; 

      self.thumbCenterPoint = [self drawTheArcTrack:self.value atPoint:middlePoint withRadius:radius AndColor:NO inContext:context]; 

      [self drawThumbAtPoint:self.thumbCenterPoint inContext:context]; 
      break; 
    } 
} 

/** @name Thumb management methods */ 
#pragma mark - Thumb management methods 
- (BOOL)isPointInThumb:(CGPoint)point { 
    CGRect thumbTouchRect = CGRectMake(self.thumbCenterPoint.x - kThumbRadius, self.thumbCenterPoint.y - kThumbRadius, kThumbRadius*2, kThumbRadius*2); 
    return CGRectContainsPoint(thumbTouchRect, point); 
} 

/** @name UIGestureRecognizer management methods */ 
#pragma mark - UIGestureRecognizer management methods 
- (void)panGestureHappened:(UIPanGestureRecognizer *)panGestureRecognizer { 
    CGPoint tapLocation = [panGestureRecognizer locationInView:self]; 
    switch (panGestureRecognizer.state) { 
     case UIGestureRecognizerStateChanged: { 

      CGFloat radius; 
      CGPoint sliderCenter; 
      CGPoint sliderStartPoint; 
      CGFloat angle; 


      CGFloat xStart; 
      CGFloat maximumValue; 
      CGFloat sliderWidth; 
      CGFloat point; 

      switch (self.sliderStyle) { 
       case UISliderStyleLine: 

        sliderWidth = [self sliderWidth]; 
        xStart = self.bounds.origin.x + (self.bounds.size.width - sliderWidth)/2; 
        maximumValue = self.maximumValue; 
        point = tapLocation.x; 

        self.value = translatePointToValue(point, xStart, maximumValue, sliderWidth); 

        break; 

       case UISliderStyleArc: 
       default: 

        radius = [self sliderRadius]; 
        sliderCenter = CGPointMake(self.bounds.size.width/2, self.bounds.size.width); 
        sliderStartPoint = CGPointMake(sliderCenter.x - (radius * 1.15), sliderCenter.y - (radius * 2.1)); 
        angle = angleBetweenThreePoints(sliderCenter, sliderStartPoint, tapLocation); 

        if (angle < 0) { 
         angle = -angle; 
        } 
        else { 
         angle = 0.0; 
         //angle = M_PI/3 - angle; 
        } 

        self.value = translateValueFromSourceIntervalToDestinationInterval(angle, 0, M_PI/3, self.minimumValue, self.maximumValue); 
        break; 
      } 
     } 
     default: 
      break; 
    } 
} 
- (void)tapGestureHappened:(UITapGestureRecognizer *)tapGestureRecognizer { 
    if (tapGestureRecognizer.state == UIGestureRecognizerStateEnded) { 
     CGPoint tapLocation = [tapGestureRecognizer locationInView:self]; 
     if ([self isPointInThumb:tapLocation]) { 
      // do something on tap 
     } 
     else { 
     } 
    } 
} 

@end 

/** @name Utility Functions */ 
#pragma mark - Utility Functions 
float translateValueFromSourceIntervalToDestinationInterval(float sourceValue, float sourceIntervalMinimum, float sourceIntervalMaximum, float destinationIntervalMinimum, float destinationIntervalMaximum) { 
    float a, b, destinationValue; 

    a = (destinationIntervalMaximum - destinationIntervalMinimum)/(sourceIntervalMaximum - sourceIntervalMinimum); 
    b = destinationIntervalMaximum - a*sourceIntervalMaximum; 

    destinationValue = a*sourceValue + b; 

    return destinationValue; 
} 

float translateValueToPoint(float value, float xStart, float maximum, float width) 
{ 
    float point = (width * value)/maximum; 
//  
// point = xStart + point; 
//  
    return point; 
} 

float translatePointToValue(float point, float xStart, float maximum, float width) 
{ 
    float value = (point) * maximum; 
    value = value/width; 

    return value; 
} 


CGFloat angleBetweenThreePoints(CGPoint centerPoint, CGPoint p1, CGPoint p2) { 
    CGPoint v1 = CGPointMake(p1.x - centerPoint.x, p1.y - centerPoint.y); 
    CGPoint v2 = CGPointMake(p2.x - centerPoint.x, p2.y - centerPoint.y); 

    CGFloat angle = atan2f(v2.x*v1.y - v1.x*v2.y, v1.x*v2.x + v1.y*v2.y); 

    return angle; 
} 

你會需要拇指圖像以及 enter image description here