沿笔划绘制和旋转文本

Draw and rotate Text along a stroke

我尝试沿笔划旋转文本。用户可以通过触摸创建笔划,并在他想要的方向上移动手指,然后笔划缩放到手指所在的点。我想沿笔划显示当前长度,文本显示保持缩放并随笔划旋转。

我认为我离可行的解决方案不远了。目前文本并不总是在正确的位置,它取决于旋转。我认为 Context Translation 有问题,但让我们看看我的代码。

这是我绘制文字的方法:

- (void)drawText:(NSString *)text withFrame:(CGRect)rect withFont:(UIFont *)font rotation:(float)radians alignment:(NSTextAlignment)alignment context:(CGContextRef)context {
NSMutableParagraphStyle *paragraphStyle = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
paragraphStyle.lineBreakMode = NSLineBreakByWordWrapping;
paragraphStyle.alignment = alignment;

NSDictionary *attributes = @{ NSFontAttributeName: font,
                              NSParagraphStyleAttributeName: paragraphStyle,
                              NSForegroundColorAttributeName: [UIColor blackColor] };

CGContextSaveGState(context);
CGContextScaleCTM(context, 1.0, 1.0);
//CGRect textSize = [text boundingRectWithSize:rect.size options:NSStringDrawingUsesLineFragmentOrigin attributes:attributes context:nil];
CGContextTranslateCTM(context, rect.origin.x + (rect.size.width * 0.5), rect.origin.y + (rect.size.height * 0.5));
CGContextRotateCTM(context, radians);
CGContextTranslateCTM(context, -(rect.origin.x + (rect.size.width * 0.5)), -(rect.origin.y + (rect.size.height * 0.5)));

[[UIColor redColor] set];
CGContextFillRect(context, rect);

[text drawInRect:rect withAttributes:attributes];

CGContextRestoreGState(context);
}

我这样称呼它:

CGFloat a = shapeToBeDrawn.startPoint.y - shapeToBeDrawn.endPoint.y;
CGFloat c = shapeToBeDrawn.length;
CGFloat alpha = -asin(a/c);

CGRect r = CGRectMake(shapeToBeDrawn.startPoint.x, shapeToBeDrawn.startPoint.y - 30, shapeToBeDrawn.endPoint.x - shapeToBeDrawn.startPoint.x, 20);
[self drawText:lengthStr withFrame:r withFont:[UIFont fontWithName:@"Helvetica" size:18.0f] rotation:alpha alignment:NSTextAlignmentCenter context:context];

我正在计算角度 alpha 并传递我要显示的字符串。并为形状框架上方的文本创建框架。

这是一个小视频,目前看起来如何:

Click

希望有人能帮助我,我的问题很清楚。谢谢 :)

要在所有象限中正确计算角度,请使用 atan2 函数

alpha = atan2(endPoint.y - startPoint.y, endPoint.x - startPoint.x)

定义矩形 - 计算旋转矩形的起始坐标:

 x0 = startPoint.x + Sin(alpha) * 30   
 y0 = startPoint.y - Cos(alpha) * 30   
 rect.width =  shapeToBeDrawn.length