屋頂在平方根符號

Question

我想寫一個UILabel，它可以打印帶有屋頂的平方根表達式而不是簡單的√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]; 

，然後繪製在石英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添加到您的項目，然後包括適當的頭：

#import <QuartzCore/QuartzCore.h>