iOS CoreGraphics 学习与使用

iOS中绘制方法比较多, CoreGraphics ,UIKit 框架中都有一些方法.

CoreGraphics中主要分三种,1,UIGraphicsGetCurrentContext()函数开头的绘制.2,UIGraphicsBeginImageContextWithOptions()函数开头的绘制, 3,CGPathCreateMutable()函数开头的绘制, 其中,UIGraphicsGetCurrentContext()函数需在view 的 drawInRect方法中调用.

UIKit中主要是 UIBezierPath 这个类, 或者是 文字和图片的drawInRect 方法绘制.

这些绘制方法在有上下文的环境中可以混合使用UIGraphicsGetCurrentContext()函数,CGPathCreateMutable()函数,UIBezierPath类, 都可以绘制包括路径在内的很多基本的形状. 他们都有一些各自的优缺点, 比如 用UIGraphicsGetCurrentContext()函数给矩形设置圆角比较麻烦 但是使用UIBezierPath 就可以非常简单给指定角设置圆角.

以下是使用不同的绘制方式实现不同的效果:

1,绘制一个带边框的圆形图片.

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(context, rect);        
CGContextSetLineWidth(context, lineWidth);    
[boardColor setStroke];
CGContextDrawPath(context, kCGPathEOFillStroke);

CGRect imageRect = CGRectMake(rect.origin.x + lineWidth / 2, rect.origin.y + lineWidth / 2, rect.size.width - lineWidth, rect.size.height - lineWidth);

CGContextAddEllipseInRect(context, imageRect);

CGContextClip(context);

CGContextDrawPath(context, kCGPathEOFillStroke);

CGContextSaveGState(context); 

CGContextTranslateCTM(context, 0.0, self.bounds.size.height);
CGContextScaleCTM(context, 1, -1);
CGRect re = rect;
re.origin.y = self.bounds.size.height - rect.size.height - rect.origin.y;

CGContextDrawImage(context, re, image.CGImage);

CGContextRestoreGState(context);

其中 CGContextSaveGState(context); 和 CGContextRestoreGState(context);成对出现保存当前context的绘制状态 中间做对一些设置和绘制 然后调用CGContextRestoreGState(context);恢复save之前的context.

下面这两行代码则是对context的坐标系进行平移和旋转使图片不会倒立

1
2
CGContextTranslateCTM(context, 0.0, self.bounds.size.height);           
CGContextScaleCTM(context, 1, -1);

2, 绘制可以手动点击评分的星星

image

绘制核心代码如下 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
-(void)drawRect:(CGRect)rect{

    CGFloat starHeight = self.bounds.size.height;

    imageNormal = [[UIImage imageNamed:@"starNormal.png"] CGImage];
    imageSelect = [[UIImage imageNamed:@"starSelect.png"] CGImage];
    leftSelectImg = CGImageCreateWithImageInRect(imageSelect,CGRectMake(0,0,starHeight/2,starHeight));

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSaveGState(context);

    CGContextTranslateCTM(context, 0.0, self.bounds.size.height);
    CGContextScaleCTM(context, 1, -1);

    for (int i = 0; i < 5; i++) {

        CGRect imageRect = CGRectMake(starHeight * i, 0, starHeight, starHeight);

        CGContextDrawImage(context, imageRect, imageNormal);
    }

    for (int i = 0; i < (int)self.currectStar; i++) {

        CGRect imageRect = CGRectMake(starHeight * i, 0, starHeight, starHeight);

        CGContextDrawImage(context, imageRect, imageSelect);
    }
    if (self.currectStar > (int)self.currectStar) {

        CGRect imageRect = CGRectMake(starHeight * (int)self.currectStar, 0, starHeight / 2, starHeight);

        CGContextDrawImage(context, imageRect, leftSelectImg);

    }

    CGContextRestoreGState(context);

}

点击星星进行评分代码实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

    CGPoint point = [[touches anyObject] locationInView:self];

    CGFloat count = point.x / self.bounds.size.height;

    CGFloat sum = count > (int)count + .5 ? (int)count + 1 : (int)count + .5;

    if (sum != self.currectStar) {

        self.currectStar = sum;

        [self setNeedsDisplay];
    }
}

3, 代码实现图片的旋转(向左,右,下)

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
UIImage* rotateImage(UIImage* image,Direct direct){

    void(^block)(CGContextRef context);
    CGSize imageSize;
    switch (direct) {

        case toBottom:{

            imageSize = image.size;
            block = ^(CGContextRef context){
                CGContextTranslateCTM(context, 0.0, imageSize.height);
                CGContextScaleCTM(context, 1, -1);
            };
        }
        break;
        case toRight:{

            imageSize = CGSizeMake(image.size.height, image.size.width);
            block = ^(CGContextRef context){
                CGContextRotateCTM(context, -M_PI/2);
                CGContextScaleCTM(context, -1, 1);
            };
        }
        break;
        case toLeft:{

            imageSize = CGSizeMake(image.size.height, image.size.width);
            block = ^(CGContextRef context){
                CGContextRotateCTM(context, M_PI/2);
                CGContextTranslateCTM(context, imageSize.height, -imageSize.width);
                CGContextScaleCTM(context, -1, 1);
            };
        }
        break;
        default:
        break;
    }
    UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0);

    block(UIGraphicsGetCurrentContext());

    CGContextDrawImage(UIGraphicsGetCurrentContext(), CGRectMake(0, 0, image.size.width, image.size.height), image.CGImage);
    UIImage* result = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return result;
}

4, 利用layer绘制加载动画

image

第一个: 扇形加载效果的核心代码

首先在drawRect中绘制背景圆 和 扇形起点的一条线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
-(void)drawRect:(CGRect)rect{

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [UIColor greenColor].CGColor);
    CGContextAddEllipseInRect(context, CGRectMake(centerX - radius, centerY - radius, 2*radius, 2*radius));
    CGContextDrawPath(context, kCGPathEOFill);

    CGContextMoveToPoint(context, centerX, centerY);
    CGContextAddLineToPoint(context, centerX, centerY - radius);
    CGContextSetStrokeColorWithColor(context, [UIColor orangeColor].CGColor);
    CGContextSetLineWidth(context, .5);
    CGContextDrawPath(context, kCGPathStroke);
}

其次用CGMutablePath绘制做动画的扇形

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
-(CAShapeLayer *)jmlayer{

    if (!_jmlayer) {

        _jmlayer = [CAShapeLayer layer];

        //利用lineWidth绘制扇形
        _jmlayer.lineWidth = radius;
        _jmlayer.strokeColor = [UIColor orangeColor].CGColor;
        _jmlayer.fillColor = [UIColor clearColor].CGColor;

        CGMutablePathRef cirlePath = CGPathCreateMutable();

        CGPathAddArc(cirlePath, NULL, centerX, centerY, radius/2, 1.5 * M_PI, 1.499 * M_PI, NO);

        _jmlayer.path = cirlePath;
        CGPathRelease(cirlePath);

        [self.layer addSublayer:_jmlayer];
    }
    return _jmlayer;
}

最后是动画的代码 在set方法中做动画, 多次传入扇形的比例即可

1
2
3
4
5
6
7
8
9
10
11
12
13
-(void)setPercent:(CGFloat)percent{
    CABasicAnimation * ani = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    ani.fromValue = @(_percent);
    ani.toValue = @(percent);
    ani.duration = 25;
    ani.fillMode = kCAFillModeForwards;
    ani.removedOnCompletion = NO;

    [self.jmlayer addAnimation:ani forKey:nil];

    _percent = percent;
}

第二个动画是类似, 只需要改一下lineWidth即可!

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true