objective c - Draw VU meter using Core Graphics in iOS -
i'm trying draw similar image this, using core graphics:
i able draw main arc, not able understand, how divide arc parts/draw graduation on arc? current code draw arc is:
[path addarcwithcenter:point radius:radius startangle:degrees_to_radians(specific_start_angle) endangle:degrees_to_radians(specific_end_angle) clockwise:no]; i tried using strokewithblendmode facing problem position of graduations or ticks.
teja's solution work fine you, require calculate own start , end points graduations.
i suggest create function let's draw graduations @ given angle of arc, calculate start , end points of graduations, given length.
static inline void drawgraduation(cgpoint center, cgfloat radius, cgfloat angle, cgfloat length, cgfloat width, cgcolorref color) { cgcontextref c = uigraphicsgetcurrentcontext(); cgfloat radius2 = radius+length; // radius of end points of graduations cgpoint p1 = (cgpoint){cos(angle)*radius+center.x, sin(angle)*radius+center.y}; // start point of graduation cgpoint p2 = (cgpoint){cos(angle)*radius2+center.x, sin(angle)*radius2+center.y}; // end point of graduation cgcontextmovetopoint(c, p1.x, p1.y); cgcontextaddlinetopoint(c, p2.x, p2.y); cgcontextsetstrokecolorwithcolor(c, color); cgcontextsetlinewidth(c, width); cgcontextstrokepath(c); } you can call in loop (or want it) when draw arc main scale of vu meter. can customise color, width , length of given graduations @ given intervals (for example, code gives thicker & longer red line every 5 graduations).
- (void)drawrect:(cgrect)rect { cgrect r = self.bounds; cgfloat startangle = -m_pi*0.2; // start angle of main arc cgfloat endangle = -m_pi*0.8; // end angle of main arc nsuinteger numberofgraduations = 16; cgpoint center = (cgpoint){r.size.width*0.5, r.size.height*0.5}; // center of arc cgfloat radius = (r.size.width*0.5)-20; // radius of arc cgfloat maxgraduationwidth = 1.5; // maximum graduation width cgfloat maxgraduationwidthangle = maxgraduationwidth/radius; // maximum graduation width angle (used prevent graduations being stroked outside of main arc) // draw graduations cgfloat deltaarc = (endangle-startangle+maxgraduationwidthangle)/(numberofgraduations-1); // change in angle of arc cgfloat startarc = startangle-(maxgraduationwidthangle*0.5); // starting angle of arc (int = 0; < numberofgraduations; i++) { if (i % 5 == 0) { drawgraduation(center, radius, startarc+(i*deltaarc), 14, 1.5, [uicolor redcolor].cgcolor); // red graduation every 5 graduations. } else { drawgraduation(center, radius, startarc+(i*deltaarc), 10, 1, [uicolor blackcolor].cgcolor); } } // draw main arc uibezierpath* mainarc = [uibezierpath bezierpathwitharccenter:center radius:radius startangle:startangle endangle:endangle clockwise:no]; [[uicolor blackcolor] setstroke]; mainarc.linewidth = 2; [mainarc stroke]; } output
full project: https://github.com/originaluser2/vu-meter-arc
Comments
Post a Comment