在方根符号的屋顶

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将a 或它的CoreGraphics等效的子类化drawRect),但它说明了自己绘制平方根符号的想法.

顺便说一句,如果使用Xcode版本之前的5,你必须手动添加QuartzCore.framework到你的项目,然后包括适当的标题:

#import <QuartzCore/QuartzCore.h>