Curve text on an existing circle

Question

For the application I am creating, I drew 2 circles. One is a little bigger than the other. I want to draw text between these lines, for the circular menu that I create.

I read most about the fact that you are bending the text that you need to divide into text in characters, and draw each character on it with the correct angle (by turning the context you are drawing onto).

I just can't get my head around how to get the right angles and positions for my characters.

I included a screenshot of what the menu looks like at the moment. Only the texts that I added are loaded from the image into the UIImageView.

Hope someone can get me some starting points on how I can draw text in a white circle at specific points.

EDIT: Ok, now I'm here:

I execute the following code:

- (UIImage*) createMenuRingWithFrame:(CGRect)frame { CGRect imageSize = CGRectMake(0,0,300,300); float perSectionDegrees = 360 / [sections count]; float totalRotation = 90; char* fontName = (char*)[self.menuItemsFont.fontName cStringUsingEncoding:NSASCIIStringEncoding]; CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); CGContextRef context = CGBitmapContextCreate(NULL, imageSize.size.width, imageSize.size.height, 8, 4 * imageSize.size.width, colorSpace, kCGImageAlphaPremultipliedFirst); CGContextSetTextMatrix(context, CGAffineTransformIdentity); CGContextSelectFont(context, fontName, 18, kCGEncodingMacRoman); CGContextSetRGBFillColor(context, 0, 0, 0, 1); CGPoint centerPoint = CGPointMake(imageSize.size.width / 2, imageSize.size.height / 2); double radius = (frame.size.width / 2); CGContextStrokeEllipseInRect(context, CGRectMake(centerPoint.x - (frame.size.width / 2), centerPoint.y - (frame.size.height / 2), frame.size.width, frame.size.height)); for (int index = 0; index < [sections count]; index++) { NSString* menuItemText = [sections objectAtIndex:index]; CGSize textSize = [menuItemText sizeWithFont:self.menuItemsFont]; char* menuItemTextChar = (char*)[menuItemText cStringUsingEncoding:NSASCIIStringEncoding]; float x = centerPoint.x + radius * cos(degreesToRadians(totalRotation)); float y = centerPoint.y + radius * sin(degreesToRadians(totalRotation)); CGContextSaveGState(context); CGContextTranslateCTM(context, x, y); CGContextRotateCTM(context, degreesToRadians(totalRotation - 90)); CGContextShowTextAtPoint(context, 0 - (textSize.width / 2), 0 - (textSize.height / 2), menuItemTextChar, strlen(menuItemTextChar)); CGContextRestoreGState(context); totalRotation += perSectionDegrees; } CGImageRef contextImage = CGBitmapContextCreateImage(context); CGContextRelease(context); CGColorSpaceRelease(colorSpace); return [UIImage imageWithCGImage:contextImage]; } 

These are the variables that I use there:

 NSArray* sections = [[NSArray alloc] initWithObjects:@"settings", @"test", @"stats", @"nog iets", @"woei", @"woei2", nil]; self.menuItemsFont = [UIFont fontWithName:@"VAGRounded-Bold" size:18]; 

Word rotation seems correct, and placement. Now I need to somehow figure out what rotation the letters should be (and their coordinates). I could help with that.

Edit: Fixed! Check out the following code!

 - (void) drawStringAtContext:(CGContextRef) context string:(NSString*) text atAngle:(float) angle withRadius:(float) radius { CGSize textSize = [text sizeWithFont:self.menuItemsFont]; float perimeter = 2 * M_PI * radius; float textAngle = textSize.width / perimeter * 2 * M_PI; angle += textAngle / 2; for (int index = 0; index < [text length]; index++) { NSRange range = {index, 1}; NSString* letter = [text substringWithRange:range]; char* c = (char*)[letter cStringUsingEncoding:NSASCIIStringEncoding]; CGSize charSize = [letter sizeWithFont:self.menuItemsFont]; NSLog(@"Char %@ with size: %fx %f", letter, charSize.width, charSize.height); float x = radius * cos(angle); float y = radius * sin(angle); float letterAngle = (charSize.width / perimeter * -2 * M_PI); CGContextSaveGState(context); CGContextTranslateCTM(context, x, y); CGContextRotateCTM(context, (angle - 0.5 * M_PI)); CGContextShowTextAtPoint(context, 0, 0, c, strlen(c)); CGContextRestoreGState(context); angle += letterAngle; } } - (UIImage*) createMenuRingWithFrame:(CGRect)frame { CGPoint centerPoint = CGPointMake(frame.size.width / 2, frame.size.height / 2); char* fontName = (char*)[self.menuItemsFont.fontName cStringUsingEncoding:NSASCIIStringEncoding]; CGFloat* ringColorComponents = (float*)CGColorGetComponents(ringColor.CGColor); CGFloat* textColorComponents = (float*)CGColorGetComponents(textColor.CGColor); CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); CGContextRef context = CGBitmapContextCreate(NULL, frame.size.width, frame.size.height, 8, 4 * frame.size.width, colorSpace, kCGImageAlphaPremultipliedFirst); CGContextSetTextMatrix(context, CGAffineTransformIdentity); CGContextSelectFont(context, fontName, 18, kCGEncodingMacRoman); CGContextSetRGBStrokeColor(context, ringColorComponents[0], ringColorComponents[1], ringColorComponents[2], ringAlpha); CGContextSetLineWidth(context, ringWidth); CGContextStrokeEllipseInRect(context, CGRectMake(ringWidth, ringWidth, frame.size.width - (ringWidth * 2), frame.size.height - (ringWidth * 2))); CGContextSetRGBFillColor(context, textColorComponents[0], textColorComponents[1], textColorComponents[2], textAlpha); CGContextSaveGState(context); CGContextTranslateCTM(context, centerPoint.x, centerPoint.y); float angleStep = 2 * M_PI / [sections count]; float angle = degreesToRadians(90); textRadius = textRadius - 12; for (NSString* text in sections) { [self drawStringAtContext:context string:text atAngle:angle withRadius:textRadius]; angle -= angleStep; } CGContextRestoreGState(context); CGImageRef contextImage = CGBitmapContextCreateImage(context); CGContextRelease(context); CGColorSpaceRelease(colorSpace); [self saveImage:[UIImage imageWithCGImage:contextImage] withName:@"test.png"]; return [UIImage imageWithCGImage:contextImage]; } 

Answer 1

I tried to figure it out quickly on paper, so I could be wrong :)

Convert string length to units on UnitCircle . Thus (string.lenght / circle perimeter) * 2Pi. Now you have an angle in radians for the entire line. (This is the angle between the beginning and end of the line)

For individual letters, you can do the same to get the angle (in radians) for individual letters (using the width of the letters)

Once you have an angle in radians, you can determine the position of x and y (and rotation) of the letters.

Bonus: for an even spacing, you can even determine the relationship between the total length of all lines and the entire perimeter. And divide the remaining space equally between the line.

Update I made a proof of concept using html5 / canvas, so view it with a decent browser :) You should be able to port it. (note the code is not commented)
wtf: code works fine when chrome debug console is open and crash when closing. (workaround: open the chrome console: ctrl-shift-j and reload the page: f5); FF3.6.8 seems to be all right, but the letters dance.

Answer 2

I adapted the sample Apple CoreTextArcCocoa example (mentioned by Tom X in this answer ) and thought I shared it here.

I added several other functions, for example, the ability to set the arc size to something less than 180, and the text color and offset are shifted as properties (so you do not need to have a huge frame to show the whole text).

  /* File: CoreTextArcView.m (iOS version) Abstract: Defines and implements the CoreTextArcView custom UIView subclass to draw text on a curve and illustrate best practices with CoreText. Based on CoreTextArcView provided by Apple for Mac OS X https://developer.apple.com/library/mac/#samplecode/CoreTextArcCocoa/Introduction/Intro.html Ported to iOS (& added color, arcsize features) August 2011 by Alec Vance, Juggleware LLC http://juggleware.com/ */ #import <UIKit/UIKit.h> #import <CoreText/CoreText.h> @interface CoreTextArcView : UIView { @private UIFont * _font; NSString * _string; CGFloat _radius; UIColor * _color; CGFloat _arcSize; CGFloat _shiftH, _shiftV; // horiz & vertical shift struct { unsigned int showsGlyphBounds:1; unsigned int showsLineMetrics:1; unsigned int dimsSubstitutedGlyphs:1; unsigned int reserved:29; } _flags; } @property(retain, nonatomic) UIFont *font; @property(retain, nonatomic) NSString *text; @property(readonly, nonatomic) NSAttributedString *attributedString; @property(assign, nonatomic) CGFloat radius; @property(nonatomic) BOOL showsGlyphBounds; @property(nonatomic) BOOL showsLineMetrics; @property(nonatomic) BOOL dimsSubstitutedGlyphs; @property(retain, nonatomic) UIColor *color; @property(nonatomic) CGFloat arcSize; @property(nonatomic) CGFloat shiftH, shiftV; @end /* File: CoreTextArcView.m (iOS version) */ #import "CoreTextArcView.h" #import <AssertMacros.h> #import <QuartzCore/QuartzCore.h> #define ARCVIEW_DEBUG_MODE NO #define ARCVIEW_DEFAULT_FONT_NAME @"Helvetica" #define ARCVIEW_DEFAULT_FONT_SIZE 64.0 #define ARCVIEW_DEFAULT_RADIUS 150.0 #define ARCVIEW_DEFAULT_ARC_SIZE 180.0 @implementation CoreTextArcView - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { self.font = [UIFont fontWithName:ARCVIEW_DEFAULT_FONT_NAME size:ARCVIEW_DEFAULT_FONT_SIZE]; self.text = @"Curvaceous Type"; self.radius = ARCVIEW_DEFAULT_RADIUS; self.showsGlyphBounds = NO; self.showsLineMetrics = NO; self.dimsSubstitutedGlyphs = NO; self.color = [UIColor whiteColor]; self.arcSize = ARCVIEW_DEFAULT_ARC_SIZE; self.shiftH = self.shiftV = 0.0f; } return self; } typedef struct GlyphArcInfo { CGFloat width; CGFloat angle; // in radians } GlyphArcInfo; static void PrepareGlyphArcInfo(CTLineRef line, CFIndex glyphCount, GlyphArcInfo *glyphArcInfo, CGFloat arcSizeRad) { NSArray *runArray = (NSArray *)CTLineGetGlyphRuns(line); // Examine each run in the line, updating glyphOffset to track how far along the run is in terms of glyphCount. CFIndex glyphOffset = 0; for (id run in runArray) { CFIndex runGlyphCount = CTRunGetGlyphCount((CTRunRef)run); // Ask for the width of each glyph in turn. CFIndex runGlyphIndex = 0; for (; runGlyphIndex < runGlyphCount; runGlyphIndex++) { glyphArcInfo[runGlyphIndex + glyphOffset].width = CTRunGetTypographicBounds((CTRunRef)run, CFRangeMake(runGlyphIndex, 1), NULL, NULL, NULL); } glyphOffset += runGlyphCount; } double lineLength = CTLineGetTypographicBounds(line, NULL, NULL, NULL); CGFloat prevHalfWidth = glyphArcInfo[0].width / 2.0; glyphArcInfo[0].angle = (prevHalfWidth / lineLength) * arcSizeRad; // Divide the arc into slices such that each one covers the distance from one glyph center to the next. CFIndex lineGlyphIndex = 1; for (; lineGlyphIndex < glyphCount; lineGlyphIndex++) { CGFloat halfWidth = glyphArcInfo[lineGlyphIndex].width / 2.0; CGFloat prevCenterToCenter = prevHalfWidth + halfWidth; glyphArcInfo[lineGlyphIndex].angle = (prevCenterToCenter / lineLength) * arcSizeRad; prevHalfWidth = halfWidth; } } // ensure that redraw occurs. -(void)setText:(NSString *)text{ [_string release]; _string = [text retain]; [self setNeedsDisplay]; } //set arc size in degrees (180 = half circle) -(void)setArcSize:(CGFloat)degrees{ _arcSize = degrees * M_PI/180.0; } //get arc size in degrees -(CGFloat)arcSize{ return _arcSize * 180.0/M_PI; } - (void)drawRect:(CGRect)rect { // Don't draw if we don't have a font or string if (self.font == NULL || self.text == NULL) return; // Initialize the text matrix to a known value CGContextRef context = UIGraphicsGetCurrentContext(); //Reset the transformation //Doing this means you have to reset the contentScaleFactor to 1.0 CGAffineTransform t0 = CGContextGetCTM(context); CGFloat xScaleFactor = t0.a > 0 ? t0.a : -t0.a; CGFloat yScaleFactor = t0.d > 0 ? t0.d : -t0.d; t0 = CGAffineTransformInvert(t0); if (xScaleFactor != 1.0 || yScaleFactor != 1.0) t0 = CGAffineTransformScale(t0, xScaleFactor, yScaleFactor); CGContextConcatCTM(context, t0); CGContextSetTextMatrix(context, CGAffineTransformIdentity); if(ARCVIEW_DEBUG_MODE){ // Draw a black background (debug) CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor); CGContextFillRect(context, self.layer.bounds); } NSAttributedString *attStr = self.attributedString; CFAttributedStringRef asr = (CFAttributedStringRef)attStr; CTLineRef line = CTLineCreateWithAttributedString(asr); assert(line != NULL); CFIndex glyphCount = CTLineGetGlyphCount(line); if (glyphCount == 0) { CFRelease(line); return; } GlyphArcInfo * glyphArcInfo = (GlyphArcInfo*)calloc(glyphCount, sizeof(GlyphArcInfo)); PrepareGlyphArcInfo(line, glyphCount, glyphArcInfo, _arcSize); // Move the origin from the lower left of the view nearer to its center. CGContextSaveGState(context); CGContextTranslateCTM(context, CGRectGetMidX(rect)+_shiftH, CGRectGetMidY(rect)+_shiftV - self.radius / 2.0); if(ARCVIEW_DEBUG_MODE){ // Stroke the arc in red for verification. CGContextBeginPath(context); CGContextAddArc(context, 0.0, 0.0, self.radius, M_PI_2+_arcSize/2.0, M_PI_2-_arcSize/2.0, 1); CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0); CGContextStrokePath(context); } // Rotate the context 90 degrees counterclockwise (per 180 degrees) CGContextRotateCTM(context, _arcSize/2.0); // Now for the actual drawing. The angle offset for each glyph relative to the previous glyph has already been calculated; with that information in hand, draw those glyphs overstruck and centered over one another, making sure to rotate the context after each glyph so the glyphs are spread along a semicircular path. CGPoint textPosition = CGPointMake(0.0, self.radius); CGContextSetTextPosition(context, textPosition.x, textPosition.y); CFArrayRef runArray = CTLineGetGlyphRuns(line); CFIndex runCount = CFArrayGetCount(runArray); CFIndex glyphOffset = 0; CFIndex runIndex = 0; for (; runIndex < runCount; runIndex++) { CTRunRef run = (CTRunRef)CFArrayGetValueAtIndex(runArray, runIndex); CFIndex runGlyphCount = CTRunGetGlyphCount(run); Boolean drawSubstitutedGlyphsManually = false; CTFontRef runFont = CFDictionaryGetValue(CTRunGetAttributes(run), kCTFontAttributeName); // Determine if we need to draw substituted glyphs manually. Do so if the runFont is not the same as the overall font. if (self.dimsSubstitutedGlyphs && ![self.font isEqual:(UIFont *)runFont]) { drawSubstitutedGlyphsManually = true; } CFIndex runGlyphIndex = 0; for (; runGlyphIndex < runGlyphCount; runGlyphIndex++) { CFRange glyphRange = CFRangeMake(runGlyphIndex, 1); CGContextRotateCTM(context, -(glyphArcInfo[runGlyphIndex + glyphOffset].angle)); // Center this glyph by moving left by half its width. CGFloat glyphWidth = glyphArcInfo[runGlyphIndex + glyphOffset].width; CGFloat halfGlyphWidth = glyphWidth / 2.0; CGPoint positionForThisGlyph = CGPointMake(textPosition.x - halfGlyphWidth, textPosition.y); // Glyphs are positioned relative to the text position for the line, so offset text position leftwards by this glyph width in preparation for the next glyph. textPosition.x -= glyphWidth; CGAffineTransform textMatrix = CTRunGetTextMatrix(run); textMatrix.tx = positionForThisGlyph.x; textMatrix.ty = positionForThisGlyph.y; CGContextSetTextMatrix(context, textMatrix); if (!drawSubstitutedGlyphsManually) { CTRunDraw(run, context, glyphRange); } else { // We need to draw the glyphs manually in this case because we are effectively applying a graphics operation by setting the context fill color. Normally we would use kCTForegroundColorAttributeName, but this does not apply as we don't know the ranges for the colors in advance, and we wanted demonstrate how to manually draw. CGFontRef cgFont = CTFontCopyGraphicsFont(runFont, NULL); CGGlyph glyph; CGPoint position; CTRunGetGlyphs(run, glyphRange, &glyph); CTRunGetPositions(run, glyphRange, &position); CGContextSetFont(context, cgFont); CGContextSetFontSize(context, CTFontGetSize(runFont)); CGContextSetRGBFillColor(context, 0.25, 0.25, 0.25, 0.5); CGContextShowGlyphsAtPositions(context, &glyph, &position, 1); CFRelease(cgFont); } // Draw the glyph bounds if ((self.showsGlyphBounds) != 0) { CGRect glyphBounds = CTRunGetImageBounds(run, context, glyphRange); CGContextSetRGBStrokeColor(context, 0.0, 0.0, 1.0, 1.0); CGContextStrokeRect(context, glyphBounds); } // Draw the bounding boxes defined by the line metrics if ((self.showsLineMetrics) != 0) { CGRect lineMetrics; CGFloat ascent, descent; CTRunGetTypographicBounds(run, glyphRange, &ascent, &descent, NULL); // The glyph is centered around the y-axis lineMetrics.origin.x = -halfGlyphWidth; lineMetrics.origin.y = positionForThisGlyph.y - descent; lineMetrics.size.width = glyphWidth; lineMetrics.size.height = ascent + descent; CGContextSetRGBStrokeColor(context, 0.0, 1.0, 0.0, 1.0); CGContextStrokeRect(context, lineMetrics); } } glyphOffset += runGlyphCount; } CGContextRestoreGState(context); free(glyphArcInfo); CFRelease(line); } -(void)dealloc { [_font release]; [_string release]; [_color release]; [super dealloc] } @synthesize font = _font; @synthesize text = _string; @synthesize radius = _radius; @synthesize color = _color; @synthesize arcSize = _arcSize; @synthesize shiftH = _shiftH; @synthesize shiftV = _shiftV; @dynamic attributedString; - (NSAttributedString *)attributedString { // Create an attributed string with the current font and string. assert(self.font != nil); assert(self.text != nil); // Create our attributes... // font CTFontRef fontRef = CTFontCreateWithName((CFStringRef)self.font.fontName, self.font.pointSize, NULL); // color CGColorRef colorRef = self.color.CGColor; // pack it into attributes dictionary NSDictionary *attributesDict = [NSDictionary dictionaryWithObjectsAndKeys: (id)fontRef, (id)kCTFontAttributeName, colorRef, (id)kCTForegroundColorAttributeName, nil]; assert(attributesDict != nil); // Create the attributed string NSAttributedString *attrString = [[NSAttributedString alloc] initWithString:self.text attributes:attributesDict]; CFRelease(fontRef); return [attrString autorelease]; } @dynamic showsGlyphBounds; - (BOOL)showsGlyphBounds { return _flags.showsGlyphBounds; } - (void)setShowsGlyphBounds:(BOOL)show { _flags.showsGlyphBounds = show ? 1 : 0; } @dynamic showsLineMetrics; - (BOOL)showsLineMetrics { return _flags.showsLineMetrics; } - (void)setShowsLineMetrics:(BOOL)show { _flags.showsLineMetrics = show ? 1 : 0; } @dynamic dimsSubstitutedGlyphs; - (BOOL)dimsSubstitutedGlyphs { return _flags.dimsSubstitutedGlyphs; } - (void)setDimsSubstitutedGlyphs:(BOOL)dim { _flags.dimsSubstitutedGlyphs = dim ? 1 : 0; } @end 

Answer 3

To save time, here is what I found for a CoreTextArcView that provides

 - (id)initWithFrame:(CGRect)frame font:(UIFont *)font text:(NSString *)text radius:(float)radius arcSize:(float)arcSize color:(UIColor *)color; 

  (x, y) <--------------- w --------------->
       + ------------------------------------------------- - +
      ^ |  |  <-
      ||  |  frame
      ||  |
      ||  VED LA BEL |
      ||  CU R HE |
      ||  xx RE x |
       |  xx xxx |
       |  xxx xx x xxx |
     h |  xxx xx xxx xx |
       |  x xxx <-----------------------------
       |  xx xx xxxxxxx xx x |  arcSize:
      ||  xx xxx xxx xx |  opening angle
      ||  x xxx xx x |  in degrees
      ||  xx xx xxx x |
      ||  x <---- r -----> xx |
      ||  x (xc, yc) x |
      ||  x <-----------------------
      ||  x xx |  xc = x + w / 2
      v + --- xx -------------------------------------- xx ----- + yc = y + h / 2 + r / 2
            xx xx
             x xx
             xxx xx
               xxx xxx
                 xxxx xxxx
                    xxxxx xxxxx
                         xxxxxxxxxxxxxxx 

this is true for r> 0 and arcsize> 0.

Answer 4

See an example of this Apple example: CoreTextArcCocoa

Demonstrates using body text to draw text along an arc in a Cocoa expression. In addition, this sample illustrates how you can use the Cocoa font panel to obtain font settings that Core Text can use to select the font used for drawing.

CoreText is also available on iOS so you can implement something similar.

Answer 5

I tried the git project mentioned above and as ZpaceZombor said there is a wrong offset

 CGContextTranslateCTM(context, CGRectGetMidX(rect)+_shiftH, CGRectGetMidY(rect)+_shiftV - self.radius / 2.0); 

I just changed to

 CGContextTranslateCTM(context, CGRectGetMidX(rect)+_shiftH, CGRectGetMidY(rect)+_shiftV); 

I set the radius to Min between the width and height of the container view, so I set the arc size to 2π .

I arbitrarily changed the line

 CGContextRotateCTM(context, _arcSize/2.0); 

from

 CGContextRotateCTM(context, M_PI_2); 

I changed the init method to

 - (id)initWithFrame:(CGRect)frame font:(UIFont *)font text:(NSString *)text color:(UIColor *)color{ self = [super initWithFrame:frame]; if (self) { self.font = font; self.text = text; self.radius = -1 * (frame.size.width > frame.size.height ? frame.size.height / 2 : frame.size.width / 2); _arcSize = 2* M_PI; self.showsGlyphBounds = NO; self.showsLineMetrics = NO; self.dimsSubstitutedGlyphs = NO; self.color = color; self.shiftH = self.shiftV = 0.0f; } return self; } 

After many attempts, I made this modification of the PrepareGlyphArcInfo function

 // this constants come from a single case ( fontSize = 22 | circle diameter = 250px | lower circle diameter 50px | 0.12f is a proportional acceptable value of 250px diameter | 0.18f is a proportional acceptable value of 50px | 0.035f is a proportional acceptable value of "big" chars #define kReferredCharSpacing 0.12f #define kReferredFontSize 22.f #define kReferredMajorDiameter 250.f #define kReferredMinorDiameter 50.f #define kReferredMinorSpacingFix 0.18f #define kReferredBigCharSpacingFix 0.035f static void PrepareGlyphArcInfo(UIFont* font,CGFloat containerRadius,CTLineRef line, CFIndex glyphCount, GlyphArcInfo *glyphArcInfo, CGFloat arcSizeRad) { NSArray *runArray = (NSArray *)CTLineGetGlyphRuns(line); CGFloat curMaxTypoWidth = 0.f; CGFloat curMinTypoWidth = 0.f; // Examine each run in the line, updating glyphOffset to track how far along the run is in terms of glyphCount. CFIndex glyphOffset = 0; for (id run in runArray) { CFIndex runGlyphCount = CTRunGetGlyphCount((CTRunRef)run); // Ask for the width of each glyph in turn. CFIndex runGlyphIndex = 0; for (; runGlyphIndex < runGlyphCount; runGlyphIndex++) { glyphArcInfo[runGlyphIndex + glyphOffset].width = CTRunGetTypographicBounds((CTRunRef)run, CFRangeMake(runGlyphIndex, 1), NULL, NULL, NULL); if (curMaxTypoWidth < glyphArcInfo[runGlyphIndex + glyphOffset].width) curMaxTypoWidth = glyphArcInfo[runGlyphIndex + glyphOffset].width; if (curMinTypoWidth > glyphArcInfo[runGlyphIndex + glyphOffset].width || curMinTypoWidth == 0) curMinTypoWidth = glyphArcInfo[runGlyphIndex + glyphOffset].width; } glyphOffset += runGlyphCount; } //double lineLength = CTLineGetTypographicBounds(line, NULL, NULL, NULL); glyphArcInfo[0].angle = M_PI_2; // start at the bottom circle CFIndex lineGlyphIndex = 1; // based on font size. (supposing that with fontSize = 22 we could use 0.12) CGFloat maxCharSpacing = font.pointSize * kReferredCharSpacing / kReferredFontSize; // for diameter minor than referred 250 if ((fabsf(containerRadius)*2) < kReferredMajorDiameter) maxCharSpacing = maxCharSpacing + kReferredMinorSpacingFix * kReferredMinorDiameter / (fabsf(containerRadius)*2); CGFloat startAngle = fabsf(glyphArcInfo[0].angle); CGFloat endAngle = startAngle; for (; lineGlyphIndex < glyphCount; lineGlyphIndex++) { CGFloat deltaWidth = curMaxTypoWidth - glyphArcInfo[lineGlyphIndex].width; // fix applied to large characters like uppercase letters or symbols CGFloat bigCharFix = (glyphArcInfo[lineGlyphIndex-1].width == curMaxTypoWidth || (glyphArcInfo[lineGlyphIndex-1].width+2) >= curMaxTypoWidth ? kReferredBigCharSpacingFix : 0 ); glyphArcInfo[lineGlyphIndex].angle = - (maxCharSpacing * (glyphArcInfo[lineGlyphIndex].width + deltaWidth ) / curMaxTypoWidth) - bigCharFix; endAngle += fabsf(glyphArcInfo[lineGlyphIndex].angle); } // center text to bottom glyphArcInfo[0].angle = glyphArcInfo[0].angle + (endAngle - startAngle ) / 2; } 

And changed the drawRect: method to

 - (void)drawRect:(CGRect)rect { // Don't draw if we don't have a font or string if (self.font == NULL || self.text == NULL) return; // Initialize the text matrix to a known value CGContextRef context = UIGraphicsGetCurrentContext(); //Reset the transformation //Doing this means you have to reset the contentScaleFactor to 1.0 CGAffineTransform t0 = CGContextGetCTM(context); CGFloat xScaleFactor = t0.a > 0 ? t0.a : -t0.a; CGFloat yScaleFactor = t0.d > 0 ? t0.d : -t0.d; t0 = CGAffineTransformInvert(t0); if (xScaleFactor != 1.0 || yScaleFactor != 1.0) t0 = CGAffineTransformScale(t0, xScaleFactor, yScaleFactor); CGContextConcatCTM(context, t0); CGContextSetTextMatrix(context, CGAffineTransformIdentity); NSAttributedString *attStr = self.attributedString; CFAttributedStringRef asr = (CFAttributedStringRef)attStr; CTLineRef line = CTLineCreateWithAttributedString(asr); assert(line != NULL); CFIndex glyphCount = CTLineGetGlyphCount(line); if (glyphCount == 0) { CFRelease(line); return; } GlyphArcInfo * glyphArcInfo = (GlyphArcInfo*)calloc(glyphCount, sizeof(GlyphArcInfo)); PrepareGlyphArcInfo(self.font, self.radius, line, glyphCount, glyphArcInfo, _arcSize); // Move the origin from the lower left of the view nearer to its center. CGContextSaveGState(context); CGContextTranslateCTM(context, CGRectGetMidX(rect)+_shiftH, CGRectGetMidY(rect)+_shiftV); if(ARCVIEW_DEBUG_MODE){ // Stroke the arc in red for verification. CGContextBeginPath(context); CGContextAddArc(context, 0.0, 0.0, self.radius, M_PI_2+_arcSize/2.0, M_PI_2-_arcSize/2.0, 1); CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0); CGContextStrokePath(context); } // Rotate the context 90 degrees counterclockwise (per 180 degrees) CGContextRotateCTM(context, M_PI_2); // Now for the actual drawing. The angle offset for each glyph relative to the previous glyph has already been calculated; with that information in hand, draw those glyphs overstruck and centered over one another, making sure to rotate the context after each glyph so the glyphs are spread along a semicircular path. CGPoint textPosition = CGPointMake(0.0, self.radius); CGContextSetTextPosition(context, textPosition.x, textPosition.y); CFArrayRef runArray = CTLineGetGlyphRuns(line); CFIndex runCount = CFArrayGetCount(runArray); CFIndex glyphOffset = 0; CFIndex runIndex = 0; for (; runIndex < runCount; runIndex++) { CTRunRef run = (CTRunRef)CFArrayGetValueAtIndex(runArray, runIndex); CFIndex runGlyphCount = CTRunGetGlyphCount(run); Boolean drawSubstitutedGlyphsManually = false; CTFontRef runFont = CFDictionaryGetValue(CTRunGetAttributes(run), kCTFontAttributeName); // Determine if we need to draw substituted glyphs manually. Do so if the runFont is not the same as the overall font. if (self.dimsSubstitutedGlyphs && ![self.font isEqual:(UIFont *)runFont]) { drawSubstitutedGlyphsManually = true; } CFIndex runGlyphIndex = 0; for (; runGlyphIndex < runGlyphCount; runGlyphIndex++) { CFRange glyphRange = CFRangeMake(runGlyphIndex, 1); CGContextRotateCTM(context, -(glyphArcInfo[runGlyphIndex + glyphOffset].angle)); // Center this glyph by moving left by half its width. CGFloat glyphWidth = glyphArcInfo[runGlyphIndex + glyphOffset].width; CGFloat halfGlyphWidth = glyphWidth / 2.0; CGPoint positionForThisGlyph = CGPointMake(textPosition.x - halfGlyphWidth, textPosition.y); // Glyphs are positioned relative to the text position for the line, so offset text position leftwards by this glyph width in preparation for the next glyph. textPosition.x -= glyphWidth; CGAffineTransform textMatrix = CTRunGetTextMatrix(run); textMatrix.tx = positionForThisGlyph.x; textMatrix.ty = positionForThisGlyph.y; CGContextSetTextMatrix(context, textMatrix); CTRunDraw(run, context, glyphRange); } glyphOffset += runGlyphCount; } CGContextSetFillColorWithColor(context, [UIColor clearColor].CGColor); CGContextSetAlpha(context,0.0); CGContextFillRect(context, rect); CGContextRestoreGState(context); free(glyphArcInfo); CFRelease(line); } 

As you can see, I use the method really not well to calculate the space between each character (in the original example, the space between the characters is also based on the size of the arc). Anyway, it seems almost perfect.

A better solution might be a rectangle curve (so linear text), with graphic effort and less weird calculations.

This is what I got

Hope this helps

Answer 6

The Juggleware solution works fine, I can’t find a way to change direction, although, for example, how could I move the arc clockwise counterclockwise?

Update . After you came across complex code in this example, I decided to tip over. I went for a declarative approach using CATextLayers, which are placed on a circle and rotated individually. Thus, the results were much easier to achieve. Here is the main code for you:

 -(void)layoutSublayersOfLayer:(CALayer*)layer { if ( layer != self.layer ) { return; } self.layer.sublayers = nil; LOG( @"Laying out sublayers..." ); CGFloat xcenter = self.frame.size.width / 2; CGFloat ycenter = self.frame.size.height / 2; float angle = arcStart; float angleStep = arcSize / [self.text length]; for ( NSUInteger i = 0; i < [self.text length]; ++i ) { NSRange range = { .location = i, .length = 1 }; NSString* c = [self.text substringWithRange:range]; CGFloat yoffset = sin( DEGREES_TO_RADIANS(angle) ) * radius; CGFloat xoffset = cos( DEGREES_TO_RADIANS(angle) ) * radius; CGFloat rotAngle = 90 - angle; if ( clockwise ) { yoffset = -yoffset; rotAngle = -90 + angle; } CATextLayer* tl = [[CATextLayer alloc] init]; if ( debugMode ) { tl.borderWidth = 1; tl.cornerRadius = 3; tl.borderColor = [UIColor whiteColor].CGColor; } tl.frame = CGRectMake( shiftH + xcenter - xoffset, shiftV + ycenter + yoffset, 20, 20 ); tl.font = self.font.fontName; tl.fontSize = self.font.pointSize; tl.foregroundColor = self.color.CGColor; tl.string = c; tl.alignmentMode = @"center"; tl.transform = CATransform3DMakeAffineTransform( CGAffineTransformMakeRotation( DEGREES_TO_RADIANS(rotAngle) ) ); if ( debugMode ) { CATextLayer* debugLayer = [self debugLayerWithText:[NSString stringWithFormat:@"%u: %.0f°", i, angle]]; debugLayer.transform = CATransform3DMakeAffineTransform( CGAffineTransformMakeRotation( DEGREES_TO_RADIANS(-rotAngle) ) ); [tl addSublayer:debugLayer]; } [self.layer addSublayer:tl]; angle += angleStep; } } 

Answer 7

You can download a sample project that uses CoreTextArcView: https://github.com/javenisme/CurvaView

Answer 8

( ):

 [self drawCurvedStringOnLayer:self.layer withAttributedText:incident atAngle:angle withRadius:300]; 

.

 - (void)drawCurvedStringOnLayer:(CALayer *)layer withAttributedText:(NSAttributedString *)text atAngle:(float)angle withRadius:(float)radius { // angle in radians CGSize textSize = CGRectIntegral([text boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, CGFLOAT_MAX) options:(NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading) context:nil]).size; float perimeter = 2 * M_PI * radius; float textAngle = (textSize.width / perimeter * 2 * M_PI); float textRotation; float textDirection; if (angle > degreesToRadians(10) && angle < degreesToRadians(170)) { //bottom string textRotation = 0.5 * M_PI ; textDirection = - 2 * M_PI; angle += textAngle / 2; } else { //top string textRotation = 1.5 * M_PI ; textDirection = 2 * M_PI; angle -= textAngle / 2; } for (int c = 0; c < text.length; c++) { NSRange range = {c, 1}; NSAttributedString* letter = [text attributedSubstringFromRange:range]; CGSize charSize = CGRectIntegral([letter boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, CGFLOAT_MAX) options:(NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading) context:nil]).size; float letterAngle = ( (charSize.width / perimeter) * textDirection ); float x = radius * cos(angle + (letterAngle/2)); float y = radius * sin(angle + (letterAngle/2)); CATextLayer *singleChar = [self drawTextOnLayer:layer withText:letter frame:CGRectMake(layer.frame.size.width/2 - charSize.width/2 + x, layer.frame.size.height/2 - charSize.height/2 + y, charSize.width, charSize.height) bgColor:nil opacity:1]; singleChar.transform = CATransform3DMakeAffineTransform( CGAffineTransformMakeRotation(angle - textRotation) ); angle += letterAngle; } } - (CATextLayer *)drawTextOnLayer:(CALayer *)layer withText:(NSAttributedString *)text frame:(CGRect)frame bgColor:(UIColor *)bgColor opacity:(float)opacity { CATextLayer *textLayer = [[CATextLayer alloc] init]; [textLayer setFrame:frame]; [textLayer setString:text]; [textLayer setAlignmentMode:kCAAlignmentCenter]; [textLayer setBackgroundColor:bgColor.CGColor]; [textLayer setContentsScale:[UIScreen mainScreen].scale]; [textLayer setOpacity:opacity]; [layer addSublayer:textLayer]; return textLayer; } /** Degrees to Radian **/ #define degreesToRadians(degrees) (( degrees ) / 180.0 * M_PI ) /** Radians to Degrees **/ #define radiansToDegrees(radians) (( radians ) * ( 180.0 / M_PI ) ) 

Answer 9

. , , . totalLength .

, textItems .

textWidths totalLength , , -(pythonish) :

 block = max(textWidths) assert(block * len(textWidths) <= totalLength) offsets = [(block * i) + ((block-width) / 2) for i, width in enumerate(textWidths)] 

, , , , , , - , , . totalLength offsets[i] .

, . . ( 0 totalLength )

 def offsetToAngle(pixel): ratio = pixel / totalLength angle = math.pi * 2 * ratio # cool kids use radians. return angle 

. :

 def angleToPosition(angle, characterWidth): xNorm = math.sin(angle + circleRotation) yNorm = math.cos(angle + circleRotation) halfCWidth = characterWidth / 2 x = xNorm * radius + yNorm * halfCWidth # +y = tangent y = yNorm * radius - xNorm * halfCWidth # -x = tangent again. # translate to the circle centre x += circleCentre.x y += circleCentre.y return x,y 

. , . , , , . , "", . 0,0 , . .

: , . , . . , , , , ( CGContextTranslateCTM , ) , , .

circleRotation - , , . .

:

 for text, offset in zip(textItems, offsets): pix = offset # start each block at the offset we calculated earlier. for c in text: cWidth = measureGlyph(c) # choose the circumference location of the middle of the character # this is to match with the tangent calculation of tangentToOffset angle = offsetToAngle(pix + cWidth / 2) x,y = angleToPosition(angle, cWidth) drawGlyph(c, x, y, angle) pix += cWidth # start of next character in circumference space 

, .

Answer 10

:

, CoreTextArcView: https://github.com/javenisme/CurvaView

, , UILabel.

 - (void)sizeToFit{ [super sizeToFit]; CGFloat width = ceilf( fabsf((self.radius*2)) + self.font.lineHeight) + 3.0; CGRect f = self.frame; f.size = CGSizeMake(width,width); self.frame = f; [self setNeedsDisplay]; } 

- , .

Answer 11

 #import <Cocoa/Cocoa.h> @interface CircleTextCell : NSCell { } @end #import "CircleTextCell.h" #define PI (3.141592653589793) @implementation CircleTextCell - (void)drawWithFrame: (NSRect)cellFrame inView: (NSView*)controlView { NSAttributedString *str = [self attributedStringValue]; NSSize stringSize = [str size]; NSUInteger chars = [[str string] length]; CGFloat radius = (stringSize.width + 5 * chars) / (2 * PI); CGFloat diameter = 2*radius; NSPoint scale = {1,1}; if (diameter > cellFrame.size.width) { scale.x = cellFrame.size.width / diameter; } if (diameter > cellFrame.size.height) { scale.y = cellFrame.size.height / diameter; } NSAffineTransform *transform = [NSAffineTransform transform]; NSAffineTransformStruct identity = [transform transformStruct]; [transform scaleXBy: scale.x yBy: scale.y]; [transform translateXBy: radius yBy: 0]; [NSGraphicsContext saveGraphicsState]; [transform concat]; NSPoint origin = {0,0}; CGFloat angleScale = 360 / (stringSize.width + (5 * chars)); for (NSUInteger i=0 ; i<chars ; i++) { NSAttributedString *substr = [str attributedSubstringFromRange: NSMakeRange(i, 1)]; [substr drawAtPoint: origin]; [transform setTransformStruct: identity]; CGFloat displacement = [substr size].width + 5; [transform translateXBy: displacement yBy: 0]; [transform rotateByDegrees: angleScale * displacement]; [transform concat]; } [NSGraphicsContext restoreGraphicsState]; } @end #import <Cocoa/Cocoa.h> @class CircleTextCell; @interface CircleTextView : NSView { CircleTextCell *cell; } @end #import "CircleTextView.h" #import "CircleTextCell.h" @implementation CircleTextView - (void)awakeFromNib { NSDictionary *attributes = [NSDictionary dictionaryWithObject: [NSFont fontWithName: @"Zapfino" size:32] forKey: NSFontAttributeName]; NSAttributedString *str = [[NSAttributedString alloc] initWithString: @"Hello World! This is a very long text string that will be wrapped into a circle by a cell drawn in a custom view" attributes: attributes]; cell = [[CircleTextCell alloc] init]; [cell setAttributedStringValue: str]; } - (void)drawRect:(NSRect)rect { [[NSColor whiteColor] setFill]; [NSBezierPath fillRect: rect]; [cell drawWithFrame: [self bounds] inView: self]; } @end 

Answer 12

, URL https://github.com/javenisme/CurvaView , :

, . 45,60,90 180, 360.

: https://github.com/tikamsingh/CurveTextWithAngle

.