现有圆上的曲线文字
对于我正在构建的应用程序，我绘制了2个圆圈。一个比另一个大一点。我想在这些行之间弯曲文本，对于我正在构建的循环菜单。
我阅读了大部分关于弯曲文本的内容，你必须将文本分成字符，然后以正确的角度绘制每个字符（通过旋转你正在绘制的上下文）。
我无法绕过如何为我的角色获得正确的角度和位置。
我在屏幕上显示了目前菜单的截图。只有我添加的文本是从UIImageView中的图像加载的。
我希望有人可以在某些方面为我提供一些关于如何在白色圆圈中绘制文字的起点。
编辑： 好的，我现在正处于这一点：
我使用以下代码完成：
- (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];
单词的旋转似乎正确，位置也是如此。现在我需要以某种方式弄清楚字母（和它们的坐标）应该在哪个旋转。我可以用一些帮助。
编辑：已修复！看看下面的代码！
- (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];
}
12 个答案:
答案 0 :(得分：31)
我改编了Apple的CoreTextArcCocoa示例项目（Tom H在this reply中提到）并认为我会在这里分享。
我还添加了一些其他功能，例如将弧形大小设置为小于180的能力，以及文本颜色和偏移量作为属性（这样您就不必拥有一个巨大的框架显示全文）。
/*
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
答案 1 :(得分：24)
我试图在纸上快速解决，所以我可能错了：）
将字符串的长度转换为UnitCircle上的单位。因此（string.lenght / circle perimeter）* 2Pi。您现在拥有整个字符串的弧度角度。 （这是字符串开头和结尾之间的角度）
对于单独的字母，您可以使用相同的字母来获取单个字母的角度（以弧度表示）（使用字母宽度）
一旦你有弧度的角度，你可以计算字母的x和y位置（和旋转）。
奖励：对于均匀间距，您甚至可以计算出所有琴弦的总长度与整个周长之间的比率。并在字符串之间平均分配剩余空间。
<强>更新
我用html5 / canvas制作了一个proof of concept，所以用一个不错的浏览器查看它:)你应该能够移植它。 （请注意，代码未注释）
wtf：代码在chrome调试控制台打开时运行正常，并在关闭时失败。 （解决方法：打开chrome控制台：ctrl-shift-j并重新加载页面：f5）; FF3.6.8似乎没问题，但字母'跳舞'。
答案 2 :(得分：7)
为了节省你一些时间， 这是我发现的暴露
的CoreTextArcView- (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
这适用于r＆gt; 0和arcsize＆gt; 0
答案 3 :(得分：5)
查看此Apple示例项目：CoreTextArcCocoa
演示使用核心文本绘制 Cocoa中的弧形文本 应用。同样，这个样本 说明了如何使用Cocoa 用于接收字体设置的字体面板 可以由Core Text使用 选择用于绘图的字体。
CoreText也可以在iOS中使用，因此应能够实现类似的功能。
答案 4 :(得分：5)
这是我以预定角度（弧度）在图层上绘制弯曲属性字符串的方法：
[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 ) )
答案 5 :(得分：4)
我尝试了上面提到的git项目，并且正如 ZpaceZombor 所说，有一个错误的偏移量
CGContextTranslateCTM(context, CGRectGetMidX(rect)+_shiftH, CGRectGetMidY(rect)+_shiftV - self.radius / 2.0);
我已经改为
了CGContextTranslateCTM(context, CGRectGetMidX(rect)+_shiftH, CGRectGetMidY(rect)+_shiftV);
我已将半径设置为容器视图的宽度和高度之间的最小值，因此我将弧大小设置为2π。
我随意更改了行
CGContextRotateCTM(context, _arcSize/2.0);
与
CGContextRotateCTM(context, M_PI_2);
我已将init方法更改为
- (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;
}
经过多次尝试后，我对函数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;
}
并将drawRect:方法更改为
- (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);
}
正如您所看到的，我使用非常好方法来计算每个角色之间的空间（在原始示例中，角色之间的空间也基于弧的大小）。无论如何，这似乎工作得很好。
最好的解决方案是曲线矩形（所以线性文本），图形工作和不太奇怪的计算。
这就是我所获得的
希望有所帮助
答案 6 :(得分：3)
Juggleware的解决方案效果很好，我似乎无法找到改变方向的方法，即如何将弧线从顺时针方向移动到逆时针方向？
更新：在该示例中使用过度复杂的代码挣扎了好几天之后，我决定推出自己的代码。我使用CATextLayers进行声明性处理，CATextLayers放在圆圈上并单独旋转。这样，结果更容易实现。以下是您的核心代码：
-(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;
}
}
答案 7 :(得分：3)
您可以下载使用CoreTextArcView的示例项目：https://github.com/javenisme/CurvaView
答案 8 :(得分：1)
取内圈的圆周。这是您想要渲染字符基础的圆。我们称之为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
无论如何，这就是概念。
答案 9 :(得分：0)
您可以下载使用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];
}
如果有人可以改善身高，请加入。
答案 10 :(得分：0)
#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
答案 11 :(得分：0)
这是设置曲线文字的最佳网址https://github.com/javenisme/CurvaView：
但是根据度数明智的曲线我只是稍微更新一下代码，我们可以将曲线设置为度数。像45,60,90 180,360。
查看代码：https://github.com/tikamsingh/CurveTextWithAngle
你可以采取一些想法。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？