IOS Draw Turntable Practice Demo

Group to the new 6+, in order to engage in a lottery draw wrote this lottery program. It's the clatter we're so naughty ~

First of all we have to have weights data, recently in the game to see the right, add points to the likes of the characters:

1Nsdictionary *datadic =[Nsdictionary2 Dictionarywithobjectsandkeys:3@(1),@"Jamie",4@(1),@"Cersei", 5@(1),@"Joffery",6@(3),@"IMP",7@(1),@"Ned",8@(4),@"Arrey",9@(2),@"Shae",Ten@(2),@"Sansa", One@(4),@"Margaery", A@(2),@"Baelish", -NIL];

The next step is to draw the carousel. We're going to draw a turntable that's perfect for whatever the data is. The fairness of the turntable is that 360 degrees should be divided according to the weight of each person. Then we must first deal with the weight data, the weight into an angle.

1- (void) SetData: (nsdictionary*) Datadic2 {3Self.cornerdic =[[Nsmutabledictionary alloc]init];4     intTotalCount =0;5      for(NSString *keyinchdatadic) {6TotalCount + = [(nsnumber*) Datadic[key] intvalue];7     }8     9      for(NSString *keyinchdatadic) {Ten         DoubleCorner = [(nsnumber*) Datadic[key] doublevalue]/(Double) TotalCount * the; One [Self.cornerdic setobject:@ (corner) Forkey:key]; A     } -}

Okay, now that the data is ready, you can start drawing. The key to draw a turntable is two points: 1. How to draw a fan; 2. How to rotate a person's name to a proper angle so that it is correctly displayed on the corresponding fan.

Although previously known to be able to draw a fan by overriding DrawRect, but always feel that this method has a loss of the setback, because you can not control this drawrect when will be called, a kind of uncontrolled feeling, but looked all over the Motherland Earth also only found such a method, so first use this. In fact, a stroke of the painting out and then fill the color.

1 StaticInlinevoidDrawArc (Cgcontextref ctx, Cgpoint Point,floatRadiusfloatAngle_start,floatAngle_end, uicolor*color) {2 Cgcontextmovetopoint (CTX, Point.x, point.y);3 Cgcontextsetfillcolor (CTX, cgcolorgetcomponents ([color Cgcolor]));4Cgcontextaddarc (CTX, Point.x, Point.y, radius, Angle_start, Angle_end,0); This 0 means the arc is drawn clockwise, and 1 is counterclockwise.5 Cgcontextfillpath (CTX);6}

So why must you write the code in DrawRect? Is it okay to be outside? It seems to be no good. (If you know there will be posted back later) because all the drawing requires a "context". This context is only available in the DrawRect to get the value, and the outside to get is nil.

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

1- (void) DrawRect: (cgrect) Rect2 {3Cgcontextref CTX =Uigraphicsgetcurrentcontext ();4 Cgcontextclearrect (CTX, rect);5 6Srand ((unsigned) time (0));7     8Cgpoint Center = cgpointmake (self.frame.size.width/2, self.frame.size.width/2);9     Ten     floatAngle_start =0; One     floatAngle_end =0; A     inti =0; -      -      theUicolor *yellocolor = [Uicolor colorwithred:249/255.0Green226/255.0Blue -/255.0Alpha1]; -Uicolor *redcolor = [Uicolor colorwithred:247/255.0Green148/255.0Blue -/255.0Alpha1]; -      for(NSString *keyinchself.cornerdic) { - //if ([Key isequaltostring:@ "IMP"]) { +          -Angle_start =Angle_end; +Angle_end = angle_start+ radians ([(nsnumber*) Self.cornerdic[key] doublevalue]); A          atUicolor *color =Nil; -         if(i%2==0) { -color =Yellocolor; -         } -         Else -         { incolor =Redcolor; -         } toDrawArc (CTX, center, self.frame.size.width/2-self.layer.borderWidth, Angle_start, angle_end, color); +i++; -  theCatextlayer *txtlayer = [self textlayer:key rotate:angle_start + (Angle_end-angle_start)/2]; * [Self.layer Addsublayer:txtlayer]; $ //        }Panax Notoginseng     } -}

I used catextlayer this thing to draw a person's name, but there are quite a few things to set up. I set the text to the right so that the rotation angle is better set. I often turn the background color of the control into an eye-catching color during the debugging process, which is a better way to debug the UI.

1-(catextlayer*) Textlayer: (nsstring*) Text rotate: (cgfloat) Angel2 {3Catextlayer *txtlayer =[Catextlayer layer];4Txtlayer.frame = CGRectMake (0,0, self.frame.size.width-self.layer.borderwidth*2-2, -);5Txtlayer.anchorpoint = Cgpointmake (0.5,0.5);//rotate around Center point6Txtlayer.string=text;7Txtlayer.alignmentmode = [NSString stringWithFormat:@" Right"];8Txtlayer.fontsize = -;9[Txtlayer Setposition:cgpointmake (self.frame.size.width/2, self.frame.size.width/2)];//position is roughly the concept of the center.TenTxtlayer.transform = Catransform3dmakerotation (Angel,0,0,1); One     returnTxtlayer; A}

And finally, let the turntable spin.

1- (void) turnthetable2 {3cabasicanimation* rotationanimation = [cabasicanimation animationwithkeypath:@"transform.rotation.z"];4     DoubleEndvalue = _startvalue+ (rand ()% -)/100.0* M_PI + m_pi* (rand ()%5+5);5 6Rotationanimation.fromvalue =@ (_startvalue);7Rotationanimation.tovalue =@ (endvalue);8Rotationanimation.duration = (Endvalue-_startvalue)/(m_pi*2);9Rotationanimation.autoreverses =NO;TenRotationanimation.timingfunction =[Camediatimingfunction functionwithname:kcamediatimingfunctioneaseineaseout]; OneRotationanimation.removedoncompletion =NO; ARotationanimation.fillmode =Kcafillmodeboth; -[Self.turnTableView.layer addanimation:rotationanimation Forkey:@"turntableanimation"]; -_startvalue =Endvalue; the}

Project Address: https://github.com/MeowWang/LotteryTurnTable

Reprint please indicate the source

IOS Draw Turntable Practice Demo