Demo6—抽獎轉盤
一.搭建界面
1.設置背景圖片

self.view.layer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"LuckyBackground"].CGImage);

2.自定義一個類管理轉盤視圖，并用xib關聯界面

• 創建一個xib文件，負責管理界面的基本搭建，與LuckWheelView類關聯
  
  并設置圖片的大小
  
• 寫一個類方法快速創建當前類LuckWheelView的一個對象

+ (LuckWheelView *)wheel{//創建當前類的一個對象LuckWheelView *luckView = [[[NSBundle mainBundle] loadNibNamed:@"LuckWheelView" owner:self options:nil] lastObject];//放回對象return luckView; }

• 在控制類中用戶使用，創建轉盤視圖，并設置視圖處于主視圖中心

LuckWheelView *luckView = [LuckWheelView wheel]; luckView.center = self.view.center;

• 讓這個轉盤視圖顯示到主視圖上

[self.view addSubview:luckView];

3.當xib文件加載結束后執行后續事件

• 由于xib中搭建的界面背景是白色的，所以，為了視覺感，將其背景顏色設為透明

self.backgroundColor = [UIColor clearColor];

• 給轉盤上添加12個按鈕，不接收事件，設置按鈕的中心位置為視圖的中心；設置按鈕的大小；設置按鈕的錨點在矩形的下邊線中間，以便其他按鈕通過旋轉形成圓盤；給按鈕設置背景圖片，并把各個按鈕添加到轉盤視圖上，不可添加到主視圖上，因為給主視圖上添加視圖是添加到主視圖的最外層，會覆蓋一部分視圖；旋轉按鈕，每次循環旋轉30°；給按鈕上添加內容圖片，表示抽獎結果。

for (int i = 0; i < 12; i++) {UIButton *btn = [[UIButton alloc] init];//設置位置btn.layer.position = self.center;//設置尺寸btn.layer.bounds = CGRectMake(0, 0, 68, 143);//設置錨點btn.layer.anchorPoint = CGPointMake(0.5, 1);//設置圖片[btn setBackgroundImage:[UIImage imageNamed:@"LuckyRototeSelected"] forState:UIControlStateSelected];[self.wheelImageView addSubview:btn];//旋轉圖片btn.transform = CGAffineTransformRotate(btn.transform, M_PI * 2 / 12 * i); }

• 為了提高可移植性，把截取圖片寫成一個工具類別，分兩步實現，第一步是已知所裁圖片的名稱和裁第幾個，然后根據得到的圖片和范圍裁剪需要的那個圖片。
  
• 第一步：先通過已知的圖片名稱讀取圖片，然后計算截取一個圖片的寬高，但是為了適應不同型號的手機大小，在這里需要乘一個倍數，最后計算出裁剪的范圍

+ (UIImage *)clipWithImageNamed:(NSString *)imgName index:(int)index{//讀取圖片UIImage *img = [UIImage imageNamed:imgName];//計算每一個的寬高CGFloat width = img.size.width / 12.0 * [UIScreen mainScreen].scale;CGFloat height = img.size.height * [UIScreen mainScreen].scale;//計算裁剪的范圍CGRect frame = CGRectMake(index * width, 0, width, height);return [self clipWithImage:img rect:frame]; }

• 第二步：算出要裁剪的范圍后，調用CGImageCreateWithImageInRect方法直接裁取指定范圍內的圖片

CGImageRef是一個結構體指針，這個結構用來創建像素位圖，可以通過操作存儲的像素位來編輯圖片

typedef struct CF_BRIDGED_TYPE(id) CGImage *CGImageRef; +(UIImage *)clipWithImage:(UIImage *)img rect:(CGRect)frame{CGImageRef imgRef = CGImageCreateWithImageInRect(img.CGImage, frame);/*匹配屏幕大小參數1: cgImage：image.CGImage image為原始圖片參數2：scale：原始圖片放大倍數參數3：orientation：控制image的繪制方向*/UIImage *newImage = [UIImage imageWithCGImage:imgRef scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp];return newImage; }

• 在for循環那里加上裁取內容圖片這一步

//截取圖片 UIImage *orgLongImage = [UIImage clipWithImageNamed:@"LuckyAstrology" index:i];//將圖片顯示到按鈕上 [btn setImage:orgLongImage forState:UIControlStateNormal];

二.觸發事件
1.在LuckWheelView類中關聯xib中開始抽獎按鈕的時間
2.設置一個定時器控制轉盤的開始和暫停

• 定一個屬性變量link

@property(nonatomic, strong) CADisplayLink *link;

• 當link為空時轉盤開始，不為空時轉盤暫停，轉盤暫停之后繼續轉一個角度經過一個緩沖后再停下

- (IBAction)startButtonDidClicked:(id)sender {if (self.link) {//self.link.paused = !_link.paused;if (self.link.paused == YES) {//1.暫停_link.paused = NO;} else {_link.paused = YES;//2.繼續旋轉一個角度[self stop];}} else{//創建定時器 執行旋轉任務self.link = [CADisplayLink displayLinkWithTarget:self selector:@selector(rotate)];//啟動定時器[_link addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];} }

• 轉盤開始轉的方法

- (void)rotate{_wheelImageView.transform = CGAffineTransformRotate(_wheelImageView.transform, M_PI/30); }

3.轉盤暫停后再轉一個角度緩沖并點亮箭頭所指的那個按鈕，首先需要計算出箭頭所指方向…

- (void)stop{[UIView animateWithDuration:2 animations:^{self.wheelImageView.transform = CGAffineTransformRotate(self.wheelImageView.transform, M_PI*8/9.0);} completion:^(BOOL finished) {//確定剪頭指向哪個按鈕//1.獲取旋轉之后的弧度CGFloat hudu = [self getRadianDegreeFromTransform:self.wheelImageView.transform];//2.根據弧度計算旋轉了幾個按鈕int index = (hudu - M_PI/12.0)/(M_PI/6.0);if (hudu - index*M_PI/6.0 > 0) {index++;}//3.通過tag值獲取按鈕對象_selectedButton = [self.wheelImageView viewWithTag:12-index+1];_selectedButton.selected = YES;}]; }

• 計算旋轉的弧度

- (CGFloat)getRadianDegreeFromTransform:(CGAffineTransform)transform{CGFloat rotate = acosf(transform.a);// 旋轉180度后，需要處理弧度的變化if (transform.b < 0) {rotate = M_PI*2 - rotate;}return rotate; }

總結

以上是生活随笔為你收集整理的iOS篇—Demo6—抽奖转盘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。