Кривая текста на существующем круге

Для приложения, которое я создаю, я нарисовал 2 круга. Один немного больше другого. Я хочу изогнуть текст между этими строками для кругового меню, которое я создаю.

Я читал большую часть материала об изгибе текста, в котором вы должны разбить текст на символы и нарисовать каждый символ отдельно под прямым углом в ум (вращая контекст, в котором вы рисуете).

Я просто не могу понять, как получить правильные углы и позиции для моих персонажей.

Я приложил снимок экрана к тому, что это меню, в момент, похоже. Только тексты, которые я добавил, загружаются из изображения в UIImageView.

alt text

Я надеюсь, что кто-нибудь сможет дать мне некоторые отправные точки о том, как я могу рисовать текст в белом круге в определенных точках.

РЕДАКТИРОВАТЬ: Я хочу изогнуть текст между этими строками для кругового меню, которое я создаю.

Я читал большую часть материала об изгибе текста, в котором вы должны разбить текст на символы и нарисовать каждый символ отдельно под прямым углом в ум (вращая контекст, в котором вы рисуете).

Я просто не могу понять, как получить правильные углы и позиции для моих персонажей.

Я приложил снимок экрана к тому, что это меню, в момент, похоже. Только тексты, которые я добавил, загружаются из изображения в UIImageView.

alt text

Я надеюсь, что кто-нибудь сможет дать мне некоторые отправные точки о том, как я могу рисовать текст в белом круге в определенных точках.

РЕДАКТИРОВАТЬ: Я хочу изогнуть текст между этими строками для кругового меню, которое я создаю.

Я читал большую часть материала об изгибе текста, в котором вы должны разбить текст на символы и нарисовать каждый символ отдельно под прямым углом в ум (вращая контекст, в котором вы рисуете).

Я просто не могу понять, как получить правильные углы и позиции для моих персонажей.

Я приложил снимок экрана к тому, что это меню, в момент, похоже. Только тексты, которые я добавил, загружаются из изображения в UIImageView.

alt text

Я надеюсь, что кто-нибудь сможет дать мне некоторые отправные точки о том, как я могу рисовать текст в белом круге в определенных точках.

РЕДАКТИРОВАТЬ: с учетом правильного угла (путем поворота контекста, на котором вы рисуете).

Я просто не могу понять, как получить правильные углы и позиции для моих персонажей.

Я включил скриншот того, как сейчас выглядит меню. Только тексты, которые я добавил, загружаются из изображения в UIImageView.

alt text

Я надеюсь, что кто-нибудь сможет дать мне некоторые отправные точки о том, как я могу рисовать текст в белом круге в определенных точках.

РЕДАКТИРОВАТЬ: с учетом правильного угла (путем поворота контекста, на котором вы рисуете).

Я просто не могу понять, как получить правильные углы и позиции для моих персонажей.

Я включил скриншот того, как сейчас выглядит меню. Только тексты, которые я добавил, загружаются из изображения в UIImageView.

alt text

Я надеюсь, что кто-нибудь сможет дать мне некоторые отправные точки о том, как я могу рисовать текст в белом круге в определенных точках.

РЕДАКТИРОВАТЬ: Хорошо, сейчас я нахожусь на этом этапе:

alt text

Я достигаю этого, используя следующий код:

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

Это переменные, которые я использую там:

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

Вращение слов кажется правильным, как и их размещение. Теперь мне нужно как-то разобраться, при каком повороте должны быть буквы (и их координаты). Мне нужна помощь с этим.

Edit: Исправлено! Посмотрите следующий код!

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

}
54
задан Wim Haanstra 5 October 2010 в 23:49
поделиться