ios - How to draw a circle around a number (text) with effect animation? -
using quartz 2d foursquare rating:
please see link; green circle, example.
thanks in advance.
(void)drawrect:(cgrect)rect { cgcontextref context = uigraphicsgetcurrentcontext(); cgcontextsetlinewidth(context, 4.0); cgcontextsetstrokecolorwithcolor(context, [uicolor whitecolor].cgcolor); uicolor *thefillcolor = [uicolor greencolor]; cgcontextsetfillcolorwithcolor(context, thefillcolor.cgcolor); cgrect rectangle = cgrectmake(50.0,150.0,rect.size.width-10.0,rect.size.height-10.0); cgcontextbeginpath(context); cgcontextaddellipseinrect(context, rectangle); cgcontextdrawpath(context, kcgpathfillstroke); // or kcgpathfill cgrect smallrect = cgrectinset(rectangle, 40, 40); cgcontextbeginpath(context); cgcontextaddellipseinrect(context, smallrect); cgcontextdrawpath(context, kcgpathfillstroke); // or kcgpathfill uigraphicsendimagecontext(); } drow rect never called loading ui xib ?
here's sample class whipped up. it's not true "animation", gives correct appearance of one:
#import <uikit/uikit.h> @interface mssnumberwithcircleview : uiview { } @property (assign, nonatomic) nsinteger number; @property (strong, nonatomic) uicolor *circlecolor; @property (strong, nonatomic) uicolor *numbercolor; @property (strong, nonatomic) uifont *numberfont; - (id)initwithnumber:(nsinteger)number numberfont:(uifont *)numberfont numbercolor:(uicolor *)numbercolor circlecolor:(uicolor *)circlecolor; @end // header import #import "mssnumberwithcircleview.h" // other imports @interface mssnumberwithcircleview () { } @property (assign, nonatomic) cgfloat angle; @property (assign, nonatomic) cgfloat animationduration; @property (assign, nonatomic) cgfloat animationframes; + (nsinteger)defaultnumber; + (uicolor *)defaultcirclecolor; + (uicolor *)defaultnumbercolor; + (uifont *)defaultnumberfont; @end @implementation mssnumberwithcircleview #pragma mark - class methods (default property values) + (nsinteger)defaultnumber { return 1; } + (uicolor *)defaultcirclecolor { static uicolor *defaultcolor = nil; static dispatch_once_t oncetoken; dispatch_once(&oncetoken, ^{ defaultcolor = [uicolor colorwithred:136.0f/255.0f green:190.0f/255.0f blue:050.0f/255.0f alpha:1.0f]; }); return defaultcolor; } + (uicolor *)defaultnumbercolor { static uicolor *defaultcolor = nil; static dispatch_once_t oncetoken; dispatch_once(&oncetoken, ^{ defaultcolor = [uicolor whitecolor]; }); return defaultcolor; } + (uifont *)defaultnumberfont { static uifont *defaultfont = nil; static dispatch_once_t oncetoken; dispatch_once(&oncetoken, ^{ defaultfont = [uifont fontwithname:@"helveticaneue-light" size:240.0f]; }); return defaultfont; } #pragma mark - initialization methods - (id)init { self = [super init]; if (self != nil) { [self defaultsetup]; } return self; } - (id)initwithcoder:(nscoder *)adecoder { self = [super initwithcoder:adecoder]; if (self != nil) { [self defaultsetup]; } return self; } - (id)initwithnumber:(nsinteger)number numberfont:(uifont *)numberfont numbercolor:(uicolor *)numbercolor circlecolor:(uicolor *)circlecolor { self = [super init]; if (self != nil) { self.circlecolor = circlecolor; self.numbercolor = numbercolor; self.numberfont = numberfont; self.number = number; } return self; } - (void)defaultsetup { self.angle = 0; self.animationduration = 0.4f; self.animationframes = 30; self.circlecolor = [mssnumberwithcircleview defaultcirclecolor]; self.numbercolor = [mssnumberwithcircleview defaultnumbercolor]; self.numberfont = [mssnumberwithcircleview defaultnumberfont]; self.number = [mssnumberwithcircleview defaultnumber]; } - (void)drawrect:(cgrect)rect { self.angle = self.angle + (2 * m_pi / self.animationframes); cgcontextref context = uigraphicsgetcurrentcontext(); cgfloat circleside = min(rect.size.height, rect.size.width); cgfloat xoffset = (rect.size.width - circleside) / 2.0f; cgfloat yoffset = (rect.size.height - circleside) / 2.0f; cgrect circlerect = cgrectmake(xoffset, yoffset, circleside, circleside); cgpoint circlecenter = cgpointmake(cgrectgetmidx(circlerect), cgrectgetmidy(circlerect)); cgrect textrect = cgrectinset(circlerect, circleside * 0.1f, circleside * 0.1f); cgfloat textside = textrect.size.width; [self.circlecolor setfill]; cgcontextmovetopoint(context, circlecenter.x, circlecenter.y); cgcontextaddarc(context, circlecenter.x, circlecenter.y, circleside / 2.0f, 0, self.angle, no); cgcontextfillpath(context); nsstring *numberstring = [nsstring stringwithformat:@"%d", (int)self.number]; nsmutableparagraphstyle *style = [[nsparagraphstyle defaultparagraphstyle] mutablecopy]; style.alignment = nstextalignmentcenter; nsdictionary *drawdict = @{nsfontattributename: self.numberfont, nsparagraphstyleattributename: style}; cgsize size = [numberstring boundingrectwithsize:cgsizemake(maxfloat, maxfloat) options:nsstringdrawingtruncateslastvisibleline | nsstringdrawinguseslinefragmentorigin attributes:drawdict context:nil].size; cgfloat fontsize = self.numberfont.pointsize; cgfloat measuredside = max(size.width, size.height); fontsize = fontsize * (textside / measuredside); self.numberfont = [self.numberfont fontwithsize:fontsize]; drawdict = @{nsfontattributename: self.numberfont, nsparagraphstyleattributename: style, nsforegroundcolorattributename: self.numbercolor}; [numberstring drawwithrect:textrect options:nsstringdrawingtruncateslastvisibleline | nsstringdrawinguseslinefragmentorigin attributes:drawdict context:nil]; if (self.angle <= (2 * m_pi)) { [self performselector:@selector(setneedsdisplay) withobject:nil afterdelay:(self.animationduration / self.animationframes)]; } else { self.angle = 0; } } @end basically, change properties adjust duration of animation. made values private, put them in header if want them publicly accessible. also, pulled defaultnumbercolor page posted.
also, designed make square (for bounds of circle) shorter side of view have setup in interface builder. center square in view. class designed call -setneedsdisplay trigger entire animation, "reset" class next animation when it's done.
Comments
Post a Comment