ios - 平方根符号上的屋顶

Question

我想编写一个 UILabel，它可以打印带有屋顶的平方根表达式，而不仅仅是一个简单的√x。 x 上面应该有一条线，就像写在纸上一样。

Answer 1

使用 Quartz 2D(QuartzCore 框架)，您可以在其上画线:

因此，给定

self.label.text = @"√23+45";
[self addSquareRootTopTo:self.label];

这会在 √ 符号之后的字符上画一条线:

- (void)addSquareRootTopTo:(UILabel *)label
{
    NSRange range = [label.text rangeOfString:@"√"];
    if (range.location == NSNotFound)
        return;

    NSString *stringThruSqrtSymbol  = [label.text substringToIndex:range.location + 1];
    NSString *stringAfterSqrtSymbol = [label.text substringFromIndex:range.location + 1];

    CGSize sizeThruSqrtSymbol;
    CGSize sizeAfterSqrtSymbol;

    // get the size of the string given the label's font

    if ([stringThruSqrtSymbol respondsToSelector:@selector(sizeWithAttributes:)])
    {
        // for iOS 7

        NSDictionary *attributes = @{NSFontAttributeName : label.font};

        sizeThruSqrtSymbol  = [stringThruSqrtSymbol sizeWithAttributes:attributes];
        sizeAfterSqrtSymbol = [stringAfterSqrtSymbol sizeWithAttributes:attributes];
    }
    else
    {
        // for earlier versions of iOS

        sizeThruSqrtSymbol  = [stringThruSqrtSymbol sizeWithFont:label.font];
        sizeAfterSqrtSymbol = [stringAfterSqrtSymbol sizeWithFont:label.font];
    }

    // create path for line over the stuff after the square root sign

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(label.frame.origin.x + sizeThruSqrtSymbol.width, label.frame.origin.y)];
    [path addLineToPoint:CGPointMake(label.frame.origin.x + sizeThruSqrtSymbol.width + sizeAfterSqrtSymbol.width, label.frame.origin.y)];

    // now add that line to a CAShapeLayer

    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    layer.lineWidth = 1.0;
    layer.strokeColor = [[UIColor blackColor] CGColor];
    layer.fillColor = [[UIColor clearColor] CGColor];
    [self.view.layer addSublayer:layer];
}

这产生了一个不太令人满意的差距:

您可以尝试将平方根符号的顶部向下推，但另一种方法是使用 Quartz 2D 绘制整个平方根符号。因此，从标签的 text 值中取出平方根符号:

self.label.text = @"23+45";
[self addSquareRootTo:self.label];

然后在 Quartz 2D 中绘制整个平方根符号:

static CGFloat const part1 = 0.12;  // tiny diagonal will be 12% of the height of the text frame
static CGFloat const part2 = 0.35;  // medium sized diagonal will be 35% of the height of the text frame

- (void)addSquareRootTo:(UILabel *)label
{
    CGSize size;

    if ([label.text respondsToSelector:@selector(sizeWithAttributes:)])
    {
        NSDictionary *attributes = @{NSFontAttributeName : label.font};

        size = [label.text sizeWithAttributes:attributes];
    }
    else
    {
        size = [label.text sizeWithFont:label.font];
    }

    UIBezierPath *path = [UIBezierPath bezierPath];

    // it's going to seem strange, but it's probably easier to draw the square root size
    // right to left, so let's start at the top right of the text frame

    [path moveToPoint:CGPointMake(label.frame.origin.x + size.width, label.frame.origin.y)];

    // move to the top left

    CGPoint point = CGPointMake(label.frame.origin.x, label.frame.origin.y);
    [path addLineToPoint:point];

    // now draw the big diagonal line down to the bottom of the text frame (at 15 degrees)

    point.y += size.height;
    point.x -= sinf(15 * M_PI / 180) * size.height;
    [path addLineToPoint:point];

    // now draw the medium sized diagonal back up (at 30 degrees)

    point.y -= size.height * part2;
    point.x -= sinf(30 * M_PI / 180) * size.height * part2;
    [path addLineToPoint:point];

    // now draw the tiny diagonal back down (again, at 30 degrees)

    point.y += size.height * part1;
    point.x -= sinf(30 * M_PI / 180) * size.height * part1;
    [path addLineToPoint:point];

    // now add the whole path to our view

    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    layer.lineWidth = 1.0;
    layer.strokeColor = [[UIColor blackColor] CGColor];
    layer.fillColor = [[UIColor clearColor] CGColor];
    [self.view.layer addSublayer:layer];
}

看起来好一点:

很明显，你可以用任何你想要的方式实现它(使用上面的任何一个，或者可能更好，将 UIView 子类化以将它或它的 CoreGraphics 等价物放在 drawRect)，但它说明了自己绘制平方根符号的想法。

---

顺便说一句，如果使用 Xcode 5 之前的版本，您必须手动将 QuartzCore.framework 添加到您的项目中，然后包含适当的 header :

#import <QuartzCore/QuartzCore.h>