通过 <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;
};
}
运行之后我们会看到:
但是当我们用鼠标划出一个区域的时候 会看到:
由此 我们就获得了自己想截取的部分~~~~~~
