Demo6—抽獎轉(zhuǎn)盤
一.搭建界面
1.設(shè)置背景圖片

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

2.自定義一個類管理轉(zhuǎn)盤視圖，并用xib關(guān)聯(lián)界面

• 創(chuàng)建一個xib文件，負責管理界面的基本搭建，與LuckWheelView類關(guān)聯(lián)
  
  并設(shè)置圖片的大小
  
• 寫一個類方法快速創(chuàng)建當前類LuckWheelView的一個對象

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

• 在控制類中用戶使用，創(chuàng)建轉(zhuǎn)盤視圖，并設(shè)置視圖處于主視圖中心

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

• 讓這個轉(zhuǎn)盤視圖顯示到主視圖上

[self.view addSubview:luckView];

3.當xib文件加載結(jié)束后執(zhí)行后續(xù)事件

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

self.backgroundColor = [UIColor clearColor];

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

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

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

+ (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]; }

• 第二步：算出要裁剪的范圍后，調(diào)用CGImageCreateWithImageInRect方法直接裁取指定范圍內(nèi)的圖片

CGImageRef是一個結(jié)構(gòu)體指針，這個結(jié)構(gòu)用來創(chuàng)建像素位圖，可以通過操作存儲的像素位來編輯圖片

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

• 在for循環(huán)那里加上裁取內(nèi)容圖片這一步

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

二.觸發(fā)事件
1.在LuckWheelView類中關(guān)聯(lián)xib中開始抽獎按鈕的時間
2.設(shè)置一個定時器控制轉(zhuǎn)盤的開始和暫停

• 定一個屬性變量link

@property(nonatomic, strong) CADisplayLink *link;

• 當link為空時轉(zhuǎn)盤開始，不為空時轉(zhuǎn)盤暫停，轉(zhuǎn)盤暫停之后繼續(xù)轉(zhuǎn)一個角度經(jīng)過一個緩沖后再停下

- (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.繼續(xù)旋轉(zhuǎn)一個角度[self stop];}} else{//創(chuàng)建定時器 執(zhí)行旋轉(zhuǎn)任務(wù)self.link = [CADisplayLink displayLinkWithTarget:self selector:@selector(rotate)];//啟動定時器[_link addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];} }

• 轉(zhuǎn)盤開始轉(zhuǎn)的方法

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

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

- (void)stop{[UIView animateWithDuration:2 animations:^{self.wheelImageView.transform = CGAffineTransformRotate(self.wheelImageView.transform, M_PI*8/9.0);} completion:^(BOOL finished) {//確定剪頭指向哪個按鈕//1.獲取旋轉(zhuǎn)之后的弧度CGFloat hudu = [self getRadianDegreeFromTransform:self.wheelImageView.transform];//2.根據(jù)弧度計算旋轉(zhuǎn)了幾個按鈕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;}]; }

• 計算旋轉(zhuǎn)的弧度

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。