iOS中繪制方法比較多, CoreGraphics ,UIKit 框架中都有一些方法.
CoreGraphics中主要分三種,1,UIGraphicsGetCurrentContext()函數(shù)開頭的繪制.2,UIGraphicsBeginImageContextWithOptions()函數(shù)開頭的繪制, 3,CGPathCreateMutable()函數(shù)開頭的繪制, 其中,UIGraphicsGetCurrentContext()函數(shù)需在view 的 drawInRect方法中調(diào)用.
UIKit中主要是 UIBezierPath 這個類, 或者是 文字和圖片的drawInRect 方法繪制.
這些繪制方法在有上下文的環(huán)境中可以混合使用UIGraphicsGetCurrentContext()函數(shù),CGPathCreateMutable()函數(shù),UIBezierPath類, 都可以繪制包括路徑在內(nèi)的很多基本的形狀. 他們都有一些各自的優(yōu)缺點, 比如 用UIGraphicsGetCurrentContext()函數(shù)給矩形設(shè)置圓角比較麻煩 但是使用UIBezierPath 就可以非常簡單給指定角設(shè)置圓角.
以下是使用不同的繪制方式實現(xiàn)不同的效果:
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);成對出現(xiàn)保存當(dāng)前context的繪制狀態(tài) 中間做對一些設(shè)置和繪制 然后調(diào)用CGContextRestoreGState(context);恢復(fù)save之前的context.
下面這兩行代碼則是對context的坐標系進行平移和旋轉(zhuǎn)使圖片不會倒立
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);
}
點擊星星進行評分代碼實現(xiàn):
-(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, 代碼實現(xiàn)圖片的旋轉(zhuǎn)(向左,右,下)
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, 待續(xù)...
