CAShapeLayer FontAwesome

使用FontAwesome

https://github.com/PrideChung/FontAwesomeKit

 

为什么要使用FontAwesome呢,其实,它的字体就是矢量图,无论是放大还是缩小都不失真的矢量图哦.

1. 下载源码,导入文件夹FontAwesomeKit,然后引入头文件FontAwesomeKit.h

 

2. 使用

    // 取得固定的icon以及设定尺寸
    FAKZocial *twitterIcon = [FAKZocial stackoverflowIconWithSize:50];
    
    // 设定相关的属性
    [twitterIcon addAttribute:NSForegroundColorAttributeName
                     value:[UIColor redColor]];
    
    // 在UILabel上显示
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
    label.attributedText = [twitterIcon attributedString];
    [self.view addSubview:label];
    label.center = self.view.center;

使用是非常简单的哦,效果如下:

 

3. 高级应用

你以为就显示出来就没了么?非也,你想过把字体转换为路径么,转换为路径后就可以执行各种CoreAnimation的动画了呢:)

先来试一下CAshapeLayer的动画路径:

    // 取得固定的icon以及设定尺寸
    FAKZocial *twitterIcon = [FAKZocial chromeIconWithSize:100];
    
    // 设定相关的属性
    [twitterIcon addAttribute:NSForegroundColorAttributeName
                     value:[UIColor blackColor]];

    // 将icon转换为贝塞尔曲线
    UIBezierPath *path = [UIBezierPath pathFromAttributedString:[twitterIcon attributedString]];

    // 创建shapeLayer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];

    // 获取path
    shapeLayer.path = path.CGPath;
    
    // 根据这个path来设定尺寸
    shapeLayer.bounds = CGPathGetBoundingBox(shapeLayer.path);
    
    // 几何反转
    shapeLayer.geometryFlipped = YES;
    
    // 一些颜色的填充
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = [UIColor cyanColor].CGColor;
    
    // 设定layer位置
    shapeLayer.position = self.view.center;
    [self.view.layer addSublayer:shapeLayer];
    
    // 定时器动画
    _timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
    [_timer event:^{
        shapeLayer.strokeEnd = arc4random()%100/100.f;
    } timeInterval:NSEC_PER_SEC];
    [_timer start];

    // 取得固定的icon以及设定尺寸
    FAKZocial *twitterIcon = [FAKZocial chromeIconWithSize:100];
    
    // 设定相关的属性
    [twitterIcon addAttribute:NSForegroundColorAttributeName
                     value:[UIColor blackColor]];

    // 将icon转换为贝塞尔曲线
    UIBezierPath *path = [UIBezierPath pathFromAttributedString:[twitterIcon attributedString]];

    // 创建shapeLayer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];

    // 获取path
    shapeLayer.path = path.CGPath;
    
    // 根据这个path来设定尺寸
    shapeLayer.bounds = CGPathGetBoundingBox(shapeLayer.path);
    
    // 几何反转
    shapeLayer.geometryFlipped = YES;
    
    // 一些颜色的填充
    shapeLayer.fillColor = [UIColor blackColor].CGColor;
    shapeLayer.strokeColor = [UIColor clearColor].CGColor;
    shapeLayer.position = CGPointMake(50, 50);
    
    // 渐变颜色图层
    CAGradientLayer *colorLayer = [CAGradientLayer layer];
    colorLayer.bounds = CGRectMake(0, 0, 120, 120);
    colorLayer.mask = shapeLayer;
    colorLayer.colors = @[(id)[UIColor redColor].CGColor,
                          (id)[UIColor greenColor].CGColor,
                          (id)[UIColor yellowColor].CGColor];
    colorLayer.position = self.view.center;
    
    // 设定layer位置
    [self.view.layer addSublayer:colorLayer];
    
    // 定时器动画
    _timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
    [_timer event:^{
        colorLayer.speed = 0.5;
        colorLayer.colors = @[(id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor];
    } timeInterval:NSEC_PER_SEC];
    [_timer start];

    // 取得固定的icon以及设定尺寸
    FAKZocial *twitterIcon = [FAKZocial chromeIconWithSize:100];
    
    // 设定相关的属性
    [twitterIcon addAttribute:NSForegroundColorAttributeName
                     value:[UIColor blackColor]];

    // 将icon转换为贝塞尔曲线
    UIBezierPath *path = [UIBezierPath pathFromAttributedString:[twitterIcon attributedString]];

    // 创建shapeLayer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];

    // 获取path
    shapeLayer.path = path.CGPath;
    
    // 根据这个path来设定尺寸
    shapeLayer.bounds = CGPathGetBoundingBox(shapeLayer.path);
    
    // 几何反转
    shapeLayer.geometryFlipped = YES;
    
    // 一些颜色的填充
    shapeLayer.fillColor = [UIColor redColor].CGColor;
    shapeLayer.strokeColor = [UIColor clearColor].CGColor;
    shapeLayer.position = CGPointMake(50, 50);
    
    // 渐变颜色图层
    CAGradientLayer *colorLayer = [CAGradientLayer layer];
    colorLayer.bounds = CGRectMake(0, 0, 120, 120);
    colorLayer.mask = shapeLayer;
    colorLayer.colors = @[(id)[UIColor redColor].CGColor,
                          (id)[UIColor greenColor].CGColor,
                          (id)[UIColor yellowColor].CGColor];
    colorLayer.position = self.view.center;
    
    // 设定layer位置
    [self.view.layer addSublayer:colorLayer];
    
    // 旋转
    CABasicAnimation *basicAni = \
        [CABasicAnimationList animationWithRotationZFromValue:-2*M_PI_2 toValue:2*M_PI_2];
    basicAni.duration = 1.0f;
    basicAni.repeatCount = HUGE_VALF;
    [shapeLayer addAnimation:basicAni forKey:nil];
    
    // 定时器动画
    _timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
    [_timer event:^{
        colorLayer.colors = @[(id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor];
        
    } timeInterval:NSEC_PER_SEC];
    [_timer start];

 

 

附录:

    FAKFontAwesome *starIcon = [FAKFontAwesome asteriskIconWithSize:50];
    FAKFoundationIcons *bookmarkIcon = [FAKFoundationIcons bookmarkIconWithSize:15];
    FAKZocial *twitterIcon = [FAKZocial twitterIconWithSize:15];
    FAKIonIcons *mailIcon = [FAKIonIcons ios7EmailIconWithSize:48];