iOS 抽獎轉盤 練習demo

組里到了新的6+，為了搞一輪抽獎寫了這個抽獎程序。

首先我們要有權重數據，最近在看權利的游戲，給喜歡的人物加分: 如果你要改成自己的數據只要修改這里就可以了

    NSDictionary *dataDic = [NSDictionary
                             dictionaryWithObjectsAndKeys:
                             @(1),@"Jamie",
                             @(1),@"Cersei", 
                             @(1),@"Joffery",
                             @(3),@"Imp",
                             @(1),@"Ned",
                             @(4),@"Arrey",
                             @(2),@"Shae",
                             @(2),@"Sansa",
                             @(4),@"Margaery",
                             @(2),@"Baelish",
                             nil];

 

 接下來就是畫轉盤。我們要畫一個不管數據是什么都能夠完美展現的轉盤。轉盤的公平性就在於對 360度要根據每個人的權重進行均分。那么我們首先就要對權重數據進行處理，將權重變成角度。

- (void)setData:(NSDictionary*)dataDic
{
    self.cornerDic = [[NSMutableDictionary alloc]init];
    int totalCount = 0;
    for (NSString *key in dataDic) {
        totalCount += [(NSNumber*)dataDic[key] intValue];
    }
    
    for (NSString *key in dataDic) {
        double corner = [(NSNumber*)dataDic[key] doubleValue]/(double)totalCount * 360;
        [self.cornerDic setObject:@(corner) forKey:key];
    }
}

好了現在數據已備好，可以開始畫了。畫轉盤的關鍵有兩點：1.如何畫扇形； 2.如何把人名旋轉一個合適的角度讓它正確的顯示在對應的扇形上。

static inline void drawArc(CGContextRef ctx, CGPoint point, float radius,float angle_start, float angle_end, UIColor* color)
{
    //設置填充顏色
    CGContextSetFillColor(ctx, CGColorGetComponents( [color CGColor]));
    //移動畫筆
    CGContextMoveToPoint(ctx, point.x, point.y);
    //畫扇形
    CGContextAddArc(ctx, point.x, point.y, radius,  angle_start, angle_end, 0);
    //填充
    CGContextFillPath(ctx);

    //畫中間的白色分割線
    CGContextSetRGBStrokeColor(ctx, 1, 1, 1, 1);
    //設置線條寬度
    CGContextSetLineWidth(ctx, 2);
    CGContextMoveToPoint(ctx, point.x, point.y);
    //算出線另一端的坐標
    CGPoint point1 = CGPointMake(point.x + radius*cos(angle_start), point.y + radius*sin(angle_start));
    //畫線
    CGContextAddLineToPoint(ctx, point1.x, point1.y);
    CGContextStrokePath(ctx);
}

 

那么為什么一定要在drawRect里寫繪制的代碼呢？在外面行不行呢？貌似是不行。（如果以后知道有會貼回來）因為所有的繪制都需要一個“上下文環境”。而這個上下文只有在drawRect里才能獲取到值，在外面拿到的都是nil。

“The current graphics context is nil by default. Prior to calling its drawRect: method, view objects push a valid context onto the stack, making it current. If you are not using a UIView object to do your drawing, however, you must push a valid context onto the stack manually using the UIGraphicsPushContext function."

- (void)drawRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextClearRect(ctx, rect);

    srand((unsigned)time(0));
    
    CGPoint center = CGPointMake(self.frame.size.width/2, self.frame.size.width/2);
    
    float angle_start = 0;
    float angle_end = 0;
    int i = 0;
    
    
    UIColor *yelloColor = [UIColor colorWithRed:249/255.0 green:226/255.0 blue:55/255.0 alpha:1];
    UIColor *redColor = [UIColor colorWithRed:247/255.0 green:148/255.0 blue:53/255.0 alpha:1];
    
    //遍歷字典，畫餅
    for (NSString *key in self.cornerDic) {
//        if ([key isEqualToString:@"Imp"]) {
        
        angle_start = angle_end;
        angle_end = angle_start+ radians([(NSNumber*)self.cornerDic[key] doubleValue]);
        
        UIColor *color = nil;
        if (i%2 == 0) {
            color = yelloColor;
        }
        else
        {
            color = redColor;
        }
        //畫扇形
        drawArc(ctx, center, self.frame.size.width/2-self.layer.borderWidth, angle_start, angle_end, color);
        i++;

        CATextLayer *txtLayer = [self textLayer:key rotate:angle_start + (angle_end-angle_start)/2];
        [self.layer addSublayer:txtLayer];
//        }
    }
}

畫人名我用了CATextLayer這個東西，可設置的東西還挺多的。我把文字設置在右邊，這樣旋轉角更好設置。我在調試過程中經常把控件的背景顏色變成醒目的顏色，這樣更好調試UI。

    CATextLayer *txtLayer = [CATextLayer layer];
    //設置每個layer的長度都為轉盤的直徑
    txtLayer.frame = CGRectMake(0, 0, self.frame.size.width-self.layer.borderWidth*2-8, 25);
    
    //設置錨點，繞中心點旋轉
    txtLayer.anchorPoint = CGPointMake(0.5, 0.5);
    txtLayer.string = text;
    txtLayer.alignmentMode = [NSString stringWithFormat:@"right"];
    txtLayer.fontSize = 18;
    
    //layer沒有center，用Position
    [txtLayer setPosition:CGPointMake(self.frame.size.width/2, self.frame.size.width/2)];
    //旋轉
    txtLayer.transform = CATransform3DMakeRotation(angel,0,0,1);
    return txtLayer;

最后就是讓這個轉盤旋轉起來，用隨機數得到旋轉的弧度。

- (void)turnTheTable
{
    CABasicAnimation* rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];//z的意思是繞z軸旋轉，此處的z軸是垂直於iPhone，正方向從背面指向屏幕前方
    double endValue = _startValue+(rand()%100)/100.0 * M_PI + M_PI*(rand()%5+5); //這里的endValue單位是弧度，2PI是一圈
    
    //設置旋轉的起始值與終止值
    rotationAnimation.fromValue = @(_startValue);
    rotationAnimation.toValue = @(endValue);
    
    //旋轉時長
    rotationAnimation.duration = (endValue - _startValue)/(M_PI*2);
    rotationAnimation.autoreverses = NO;
    
    //速度函數
    rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    rotationAnimation.removedOnCompletion = NO;
    rotationAnimation.fillMode = kCAFillModeBoth;
    [self.turnTableView.layer addAnimation:rotationAnimation forKey:@"TurnTableAnimation"];
    
    //記下當前旋轉的位置，作為下一次旋轉的起始值
    _startValue = endValue;
}

 

 完整工程地址：https://github.com/MeowWang/LotteryTurnTable

 

轉載請注明出處