iphone - pages - texto curvo en mac

Texto de curva en círculo existente

Question

Para una aplicación que estoy construyendo, he dibujado 2 círculos. Uno un poco más grande que el otro. Quiero curvar texto entre esas líneas, para un menú circular que estoy construyendo.

Leí la mayoría de las cosas sobre cómo curvar un texto que tiene que dividir el texto en caracteres y dibujar cada carácter por sí mismo con el ángulo correcto en mente (al rotar el contexto en el que está dibujando).

Simplemente no puedo entender cómo obtener los ángulos y posiciones correctos para mis personajes.

Incluí una captura de pantalla sobre cómo se ve el menú, en este momento. Solo los textos que agregué se cargan desde una imagen en UIImageView.

Espero que alguien pueda obtener algunos puntos de partida sobre cómo puedo dibujar el texto en el círculo blanco, en ciertos puntos.

EDITAR: Ok, actualmente estoy en este punto:

Lo logro usando el siguiente código:

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

Estas son las variables que uso allí:

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

La rotación de las palabras parece correcta, la colocación también. Ahora necesito de alguna manera descubrir en qué rotación deberían estar las letras (y sus coordenadas). Podría usar algo de ayuda con eso.

Editar: ¡Reparado! ¡Mira el siguiente código!

- (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: %f x %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

Adapte el proyecto de ejemplo CoreTextArcCocoa de Apple (mencionado por Tom H en esta respuesta ) y pensé que lo compartiría aquí.

Agregué algunas otras características también, como la capacidad de establecer el tamaño del arco en algo más pequeño que 180, y el color del texto y el desplazamiento desplazar como propiedades (para que no tenga que tener un marco enorme para mostrar el conjunto texto).

 /*
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''s 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''s 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 2

Este es mi método para dibujar cadenas curvas atribuidas en capas, en un ángulo predefinido (en radianes):

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

La cuerda también se invierte automáticamente en el área inferior del arco.

- (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 3

Mira este proyecto de ejemplo de Apple: CoreTextArcCocoa

Demuestra el uso de Texto principal para dibujar texto a lo largo de un arco en una aplicación Cocoa. Además, esta muestra ilustra cómo puede usar el panel de fuentes Cocoa para recibir configuraciones de fuentes que Core Text pueda usar para seleccionar la fuente utilizada para el dibujo.

CoreText también está disponible en iOS, por lo que debería poder implementar algo similar.

Answer 4

Para ahorrar algo de tiempo, esto es lo que he encontrado para CoreTextArcView que expone

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

(x,y)<--------------- w ---------------> +--------------------------------------------------+ ^| | <-- || | frame || | || VED L A 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 -----> x x | || 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

esto es válido para r> 0 y arcsize> 0.

Answer 5

Traté de resolverlo rápidamente en papel, así que puedo estar equivocado :)

Convierte la longitud de la cuerda en unidades en UnitCircle . Por lo tanto (string.lenght / circle perimeter) * 2Pi. Ahora tiene el ángulo en radianes para toda la cadena. (Ese es el ángulo entre el inicio y el final de la cadena)

Para las letras separadas, puede hacer lo mismo para obtener el ángulo (en radianes) para letras individuales (usando anchos de letras)

Una vez que tenga el ángulo en radianes, puede calcular la posición xey (y la rotación) de las letras.

Bonificación: para un espaciado uniforme, puede calcular la relación entre la longitud total de todas las cuerdas y todo el perímetro. Y divide el espacio restante por igual entre la cuerda.

Actualización Hice una prueba de concepto usando html5 / canvas, así que míralo con un navegador decente :) Deberías poder portarlo. (claro, el código no está comentado)
wtf: el código funciona bien con la consola de depuración de Chrome abierta, y falla cuando se cierra. (solución alternativa: abra la consola de Chrome: ctrl-shift-j y vuelva a cargar la página: f5); FF3.6.8 parece estar bien, pero las letras ''bailan''.

Answer 6

#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 7

that is the best url https://github.com/javenisme/CurvaView to set curve your text:

But as per the the degree wise curve i just update a code little bit and we can set the curve as a degree wise . like 45,60,90 180, 360.

Look at the code : https://github.com/tikamsingh/CurveTextWithAngle

You can take some idea.

Answer 8

Probé el proyecto git mencionado anteriormente, y como dijo ZpaceZombor , hay una compensación incorrecta

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

He cambiado simplemente a

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

Establecí el radio en el valor Min entre el ancho y el alto de la vista del contenedor, por lo que configuré el tamaño del arco en 2π .

He cambiado arbitrariamente la línea

CGContextRotateCTM(context, _arcSize/2.0);

con

CGContextRotateCTM(context, M_PI_2);

Cambié el método init a

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

Después de muchos intentos, he producido esta modificación en la función PrepareGlyphArcInfo

// 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;
}

Y cambió el método drawRect: a

- (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''s 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);
}

Como puede ver, he usado un método realmente no muy bueno para calcular el espacio entre cada caracter (en el ejemplo original, el espacio entre caracteres se basa también en el tamaño del arco). De todos modos, esto parece funcionar casi bien.

La mejor solución podría ser curvar un rectángulo (por lo que el texto lineal), con esfuerzo de gráficos y cálculos menos extraños.

Esto es lo que he obtenido

Espero eso ayude

Answer 9

Juggleware''s solution works great, I can''t seem to find a way to change the direction though, ie how would I go to move the arc from clockwise to counter-clockwise?

Update : After struggling for days with the overcomplicated code in that example, I decided to roll my own. I went for a declarative approach using CATextLayers which are placed on the circle and rotated individually. This way the results were much more simple to achieve. Here''s the core 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 10

Referring to Ali Seyman ''s answer :

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

Add on this method to reduce the view frame size, just like 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];
}

If anyone could improve on reducing the height as well, welcome to add on.

Answer 11

Take the circumference of the inner circle. This is the circle you want the base of the characters to be rendered onto. We''ll call this circumference totalLength .

I assume you have a list of strings to render around the circle in textItems .

Take the width of each string into a textWidths array and distribute them evenly across totalLength , perhaps like this pseudo(pythonish) code:

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

Although better layouts can no doubt be done in the cases where the assert would trigger, all that really matters is that we know where individual words start and end in a known area. To render on a straight line of length totalLength we simply start rendering each block of text at offsets[i] .

To get it onto the circle, we''ll map that straight line back onto the circumference. To do that we need to map each pixel along that line onto a position on the circle and an angle. This function converts the offset along that line into an angle (it takes values in the range 0 to totalLength )

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

that''s your angle. To get a position:

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

That''s a bit more tricky. This is pretty much the crux of your issues, I''d have thought. The big deal is that you need to offset back along the tangent of the circle to work out the point to start rendering so that the middle of the character hits the radius of the circle. What constitues ''back'' depends on your coordinate system. if 0,0 is in the bottom left, then the signs of the tangent components is swapped. I assumed top left.

This is important: I''m also making a big assumption that the text rotation occurs around the bottom left of the glyph. If it doesn''t then things will look a bit weird. It will be more noticeable at larger font sizes. There is always a way to compensate for wherever it rotates around, and there''s usually a way to tell the system where you want the rotation origin to be (that will be related to the CGContextTranslateCTM call in your code I''d imagine) you''ll need to do a small experiment to get characters drawing at a single point rotating around their bottom left.

circleRotation is just an offset so you can rotate the whole circle, rather than having things always be in the same orientation. That''s in radians too.

so now for each character in each block of text:

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

That''s the concept, anyway.

Answer 12

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