通過 <iOS開發-Quartz2D的基本使用(一)> 我們能夠利用Quartz2D繪制直線和曲線,并制作了一個簡單的畫板功能 但是真正的開發過程當中這些是遠遠不夠的,那么我們就接著上部分內容更深層次的學習Quartz2D
矩形
//第一種
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 200, 200)];
[path fill]; // fill就是填充
//第二種
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 200, 200)];
[path stroke]; // stroke是渲染(描邊)
fill
stroke
我們很明顯的看出以上兩種效果是截然不一樣的.
橢圓
橢圓的繪制方式和上面的矩形的繪制方法類似
事例代碼:
//前兩個參數表示的是需要繪制的圖形在父視圖上的位置
//后兩個參數表示的是需要繪制的圖形在父視圖上的大小
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 200, 200, 100)];
[[UIColor purpleColor]set];
path.lineWidth = 5;
[path fill];
UIBezierPath *pat = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 200, 100)];
[[UIColor redColor]set];
pat.lineWidth = 5;
[pat stroke];
效果:
橢圓
圓角
-(void)yuanJiao{
//第一個參數是CGRect參數 第二個參數是圓角度
//[UIBezierPath bezierPathWithRoundedRect:<#(CGRect)#> cornerRadius:<#(CGFloat)#>]
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 50, 200, 200) cornerRadius:100];
[[UIColor greenColor]set];
path.lineWidth = 5;
[path stroke];
UIBezierPath *path1 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 300, 200, 200) cornerRadius:100];
[[UIColor magentaColor]set];
path.lineWidth = 5;
[path1 fill];
}
程序運行結果
圓角
柱狀圖
實例代碼
-(void)zhuZhuangTu{
UIBezierPath *path = [UIBezierPath bezierPath];
//橫線(橫軸)
[path moveToPoint:CGPointMake(0, 300)];//起點
[path addLineToPoint:CGPointMake(300, 300)];//終點
//縱線(縱軸)
[path moveToPoint:CGPointMake(0, 300)];
[path addLineToPoint:CGPointMake(0, 0)];
path.lineWidth = 5;
[[UIColor redColor]set];
[path stroke];
int lines = 0;
NSArray *dataArray = @[@100,@200,@290,@80,@70,@30,@40,@50];
for (NSNumber *num in dataArray) {
//柱狀圖的最低點
CGPoint startPoint = CGPointMake(20 + lines * 300 / dataArray.count, 300);
CGPoint endPoint = CGPointMake(20 + lines * 300 / dataArray.count, 300 - 300 * ([num intValue] / 300.0));
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:startPoint];
[path addLineToPoint:endPoint];
[UIColor greenColor];
path.lineWidth = 20;
[path stroke];
lines++ ;
}
}
柱狀圖
餅狀圖
-(void)bingZhuangTu{
NSMutableArray *dataArray = [NSMutableArray array];
for (int i = 0; i <= 100; i++) {
[dataArray addObject:@1];//分成100份 這個根據個人情況細分
}
CGFloat start = 0;
CGFloat end = 0;
for (NSNumber *num in dataArray) {
//計算角度
end = num.floatValue / 100 * M_PI * 2; //總共360度
//參數依次是 圓心 半徑 起始角度 結束角度
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 startAngle:start endAngle:start + end clockwise:YES];
//關閉路徑
[path addLineToPoint:CGPointMake(150, 150)];
[path closePath];
[[UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1] set];//隨機色
[path fill];//設置填充
start += end;
}
}
餅狀圖
我們在模擬一種等分的效果,把圓分成等比例的四分, 上面代碼也即是等價于下面內容 下面是對上面的一個分解執行
-(void)yuan{
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:M_PI_2 clockwise:YES];
[path addLineToPoint:CGPointMake(150, 150)];
[path closePath];
[path stroke];
UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 startAngle:M_PI_2 endAngle:M_PI_2 + M_PI_2 clockwise:YES];
[[UIColor redColor] set];
[path2 addLineToPoint:CGPointMake(150, 150)];
[path2 closePath];
[path2 stroke];
UIBezierPath *path3 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 startAngle:M_PI endAngle:M_PI + M_PI_2 clockwise:YES];
[path3 addLineToPoint:CGPointMake(150, 150)];
[[UIColor blueColor] set];
[path3 closePath];
[path3 stroke];
UIBezierPath *path4 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 startAngle:M_PI + M_PI_2 endAngle:0 clockwise:YES];
[path4 addLineToPoint:CGPointMake(150, 150)];
[[UIColor blackColor] set];
[path4 closePath];
[path4 stroke];
}
程序運行效果如下:
我們把stroke改為fill就變為了填充的樣式,再次不在演示.
圖片剪切
我們接下來研究一下如何對圖片進行剪切我們在viewDidLoad:方法里
//擁有一張圖片
UIImage *image =[UIImage imageNamed:@"2"];
myImageView *imageView = [[myImageView alloc]initWithImage:image];
imageView.backgroundColor = [UIColor grayColor];
CGRect rectFrame = CGRectMake(50, 50, 0, 0);
rectFrame.size = image.size;
imageView.frame = rectFrame;
[self.view addSubview:imageView];
運行以上代碼后的結果
接著我們做一下處理
//需要剪切的范圍
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
[path addClip];
//剪切
[image drawAtPoint:CGPointZero];
//獲取剪切好的圖片
UIImage *aImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
imageView.image= aImage;
再次執行后的結果
這個時候我們可以看到,按照要求我們獲得了一個剪切之后的橢圓圖形.
但是我們有時候可以根據自己實際的需要來進行裁剪 我們接下來做一件事情 需求是什么呢 鼠標在鍵盤上畫一塊區域 我們對圖片進行裁剪 ,獲取這個區域之內的內容.
首先我們自定義一個view視圖
.h
#import <UIKit/UIKit.h>
typedef void(^MyBlock)(UIBezierPath *);
@interface MYView : UIView
@property(nonatomic,copy)MyBlock block;
@end
.m
#import "MYView.h"
@interface MYView ()
@property(nonatomic,strong)NSMutableArray *pathArray;
@end
@implementation MYView
-(NSMutableArray *)pathArray{
if (!_pathArray) {
_pathArray=[NSMutableArray array];
}
return _pathArray;
}
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
for (UIBezierPath *path in self.pathArray) {
path.lineWidth = 5;
[path stroke];
}
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:[[touches anyObject] locationInView:self]];
[self.pathArray addObject:path];
}
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
//獲取終點 不止一個終點
UIBezierPath *path = [self.pathArray lastObject];
[path addLineToPoint:[[touches anyObject] locationInView:self]];
//調用drawRect方法
[self setNeedsDisplay];
}
-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
UIBezierPath *path = [_pathArray lastObject];
[path closePath];
[self setNeedsDisplay];
self.block(path);
}
視圖自定義完畢之后 我們回到viewDidLoad:方法里面
- (void)viewDidLoad {
[super viewDidLoad];
__block UIImage *image = [UIImage imageNamed:@"2"];
self.imageView = [[UIImageView alloc]initWithImage:image];
//self.imageView.frame= self.view.frame;
self.myView = [[MYView alloc]initWithFrame:self.imageView.frame];
self.myView.backgroundColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0];
[self.view addSubview:self.imageView];
[self.view addSubview:self.myView];
__weak typeof(self) se = self;
self.myView.block = ^(UIBezierPath *p){
//剪切
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
//剪切路徑
UIBezierPath *path = p;
[path addClip];//剪切
[image drawAtPoint:CGPointZero];
image = UIGraphicsGetImageFromCurrentImageContext();
//結束上下文
UIGraphicsEndImageContext();
//給imageView賦值
se.imageView.image= image;
};
}
運行之后我們會看到:
但是當我們用鼠標劃出一個區域的時候 會看到:
由此 我們就獲得了自己想截取的部分~~~~~~
