iOS中绘制方法比较多, CoreGraphics ,UIKit 框架中都有一些方法.
CoreGraphics中主要分三种,1,UIGraphicsGetCurrentContext()函数开头的绘制.2,UIGraphicsBeginImageContextWithOptions()函数开头的绘制, 3,CGPathCreateMutable()函数开头的绘制, 其中,UIGraphicsGetCurrentContext()函数需在view 的 drawInRect方法中调用.
UIKit中主要是 UIBezierPath 这个类, 或者是 文字和图片的drawInRect 方法绘制.
这些绘制方法在有上下文的环境中可以混合使用UIGraphicsGetCurrentContext()函数,CGPathCreateMutable()函数,UIBezierPath类, 都可以绘制包括路径在内的很多基本的形状. 他们都有一些各自的优缺点, 比如 用UIGraphicsGetCurrentContext()函数给矩形设置圆角比较麻烦 但是使用UIBezierPath 就可以非常简单给指定角设置圆角.
以下是使用不同的绘制方式实现不同的效果:
1,绘制一个带边框的圆形图片.
2016-11-23 16.03.59.png
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的坐标系进行平移和旋转使图片不会倒立
CGContextTranslateCTM(context, 0.0, self.bounds.size.height);
CGContextScaleCTM(context, 1, -1);
2, 绘制可以手动点击评分的星星
可点击评分
绘制核心代码如下 :
-(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);
}
点击星星进行评分代码实现:
-(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, 代码实现图片的旋转(向左,右,下)
2016-11-23 17.38.49.png
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绘制加载动画
layer的动画
第一个: 扇形加载效果的核心代码
首先在drawRect中绘制背景圆 和 扇形起点的一条线
-(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绘制做动画的扇形
2016-11-24 14.56.21.png
-(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方法中做动画, 多次传入扇形的比例即可
-(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即可!
5, 待续...
