Quartz2D绘图
2018-01-19 14:21
169 查看
Quartz2D绘图
基础绘制1. 绘制一条直线
- (void)drawRect:(CGRect)rect {
//获取图形上下文
CGContextRef context = UIGraphicsGetCurrentContext();
//设置线条颜色
CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
//设置线条宽度
CGContextSetLineWidth(context, 2.f);
//设置线条起点和终点的样式
CGContextSetLineCap(context, kCGLineCapRound);
// 绘制线方式 1
CGContextMoveToPoint(context, 100, 120);
CGContextAddLineToPoint(context, 150, 120);
// 绘制线方式 2
CGPoint apoint[2];
apoint[0] = CGPointMake(100, 120);
apoint[1] = CGPointMake(150, 120);
CGContextAddLines(context, apoint, 2);
// 开始绘制
CGContextDrawPath(context, kCGPathFillStroke);
// 使用UIBezierPath
[[UIColor redColor] setStroke];
UIBezierPath * path = [UIBezierPath bezierPath];
path.lineWidth = 2.0;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinBevel;
[path moveToPoint:CGPointMake(10, 20)];
[path addLineToPoint:CGPointMake(50, 20)];
[path closePath];
[path stroke];
}2. 绘制折线（三角形）
- (void)drawRect:(CGRect)rect {
//获取图形上下文
CGContextRef context = UIGraphicsGetCurrentContext();
//设置边框颜色
CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
//设置填充颜色
CGContextSetRGBFillColor(context, 0, 1, 0, 1);
//设置线条宽度
CGContextSetLineWidth(context, 2.f);
//设置线条起点和终点的样式
CGContextSetLineCap(context, kCGLineCapRound);
//设置线条的转角的样式
CGContextSetLineJoin(context, kCGLineJoinRound);
// 绘制线方式 1
CGContextMoveToPoint(context, 100, 120);
CGContextAddLineToPoint(context, 150, 120);
CGContextAddLineToPoint(context, 150, 180);
// 绘制线方式 2
CGPoint apoint[3];
apoint[0] = CGPointMake(100, 120);
apoint[1] = CGPointMake(150, 120);
apoint[2] = CGPointMake(150, 180);
CGContextAddLines(context, apoint, 3);
//闭合路径
CGContextClosePath(context);
// 开始绘制
CGContextDrawPath(context, kCGPathFillStroke);
// 使用UIBezierPath
[[UIColor redColor] setStroke];
UIBezierPath * path = [UIBezierPath bezierPath];
path.lineWidth = 2.0;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinBevel;
[path moveToPoint:CGPointMake(10, 20)];
[path addLineToPoint:CGPointMake(50, 20)];
[path addLineToPoint:CGPointMake(50, 60)];
[path closePath];
[path stroke];
}3. 绘制矩形
- (void)drawRect:(CGRect)rect {
//获取图形上下文
CGContextRef context = UIGraphicsGetCurrentContext();
//设置边框颜色
CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
//设置填充颜色
CGContextSetRGBFillColor(context, 0, 1, 0, 1);
//设置线条宽度
CGContextSetLineWidth(context, 2.f);
//设置线条起点和终点的样式
CGContextSetLineCap(context, kCGLineCapRound);
//设置线条的转角的样式
CGContextSetLineJoin(context, kCGLineJoinRound);
// 通过绘制线的方式 1
CGContextMoveToPoint(context, 100, 100);
CGContextAddLineToPoint(context, 150, 100);
CGContextAddLineToPoint(context, 150, 150);
CGContextAddLineToPoint(context, 100, 150);
// 通过绘制线的方式 2
CGPoint apoint[4];
apoint[0] = CGPointMake(100, 100);
apoint[1] = CGPointMake(150, 100);
apoint[2] = CGPointMake(150, 150);
apoint[3] = CGPointMake(100, 150);
CGContextAddLines(context, apoint, 4);
//闭合路径
CGContextClosePath(context);
// 绘制矩形方法
CGContextAddRect(context, CGRectMake(100, 100, 50, 50));
CGContextDrawPath(context, kCGPathFillStroke);
// 使用UIBezierPath
[[UIColor redColor] setStroke];
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 100)];
[path stroke];
}<
1098a
/span>5. 绘制一个圆
- (void)drawRect:(CGRect)rect {
//获取图形上下文
CGContextRef context = UIGraphicsGetCurrentContext();
//设置边框颜色
CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
//设置填充颜色
CGContextSetRGBFillColor(context, 0, 1, 0, 1);
//设置线条宽度
CGContextSetLineWidth(context, 2.f);
//设置线条起点和终点的样式
CGContextSetLineCap(context, kCGLineCapRound);
//设置线条的转角的样式
CGContextSetLineJoin(context, kCGLineJoinRound);
// 绘制圆方法(其实所绘制的圆为所绘制用的Rect的矩形的内切圆，当宽度等于高度时，即为正圆)
CGContextAddEllipseInRect(context, CGRectMake(100, 100, 200, 100));
CGContextDrawPath(context, kCGPathFillStroke);
// 使用UIBezierPath
[[UIColor redColor] setStroke];
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 100, 100)];
[path stroke];
}6. 绘制一段圆弧
#define arc(angle) ((angle)*(M_PI/180.0))
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
//获取图形上下文
CGContextRef context = UIGraphicsGetCurrentContext();
//设置边框颜色
CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
//设置填充颜色
CGContextSetRGBFillColor(context, 0, 1, 0, 1);
//设置线条宽度
CGContextSetLineWidth(context, 2.f);
//设置线条起点和终点的样式
CGContextSetLineCap(context, kCGLineCapRound);
//设置线条的转角的样式
// CGContextSetLineJoin(context, kCGLineJoinRound);
// 绘制圆弧方法1 (参数由左至右分别是，图形上下文、圆心x、圆心y、半径、起始弧度、结束弧度、圆弧伸展的方向（0为顺时针，1为逆时针）)
CGContextAddArc(context, 150, 300, 100, arc(100), arc(300), 0);
// 绘制圆弧方法2，由起始点、结束点分别与中间节点连线，同时以半径切过这两边则确定一段圆弧(不建议使用，因为理解不方便)
// CGContextMoveToPoint(context, 100, 100);
// CGContextAddArcToPoint(context, 150, 100, 150, 150, 50);
//闭合路径
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathFillStroke);
// 使用UIBezierPath
[[UIColor redColor] setStroke];
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100,100) radius:100 startAngle:0 endAngle:arc(135) clockwise:YES];
[path stroke];
}7. 绘制一段文字
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
NSString * str = @"text";
NSMutableDictionary * attributes = [NSMutableDictionary dictionary];
attributes[NSFontAttributeName] = [UIFont systemFontOfSize:20];
attributes[NSForegroundColorAttributeName] = [UIColor purpleColor];
attributes[NSBackgroundColorAttributeName] = [UIColor whiteColor];
[str drawInRect:CGRectMake(100, 100, 200, 30) withAttributes:attributes];
}8. 绘制一张图片
UIImage * img = [UIImage imageNamed:@"text.jpg"]; // 在指定的范围内绘制图片，有可能引起图片拉伸 [img drawInRect:rect];
9. 绘制多次贝塞尔曲线
- (void)drawRect:(CGRect)rect {
[[UIColor redColor] setStroke];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(20, 100)];
// 绘制二次贝塞尔曲线
// [path addQuadCurveToPoint:CGPointMake(120, 100) controlPoint:CGPointMake(70, 150)];
// 绘制三次贝塞尔曲线
[path addCurveToPoint:CGPointMake(120, 100) controlPoint1:CGPointMake(45, 150) controlPoint2:CGPointMake(95, 50)];
[path stroke];
}通过手指绘制指定图形
1. 绘制线条static CGContextRef _context;
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
// 获取图形上下文
_context = UIGraphicsGetCurrentContext();
// 设置线条颜色
CGContextSetRGBStrokeColor(_context, 1, 0, 0, 1);
// 设置线条的宽度
CGContextSetLineWidth(_context, 10.f);
// 设置线条的起点和终点的样式
CGContextSetLineCap(_context, kCGLineCapRound);
//设置线条的转角的样式
CGContextSetLineJoin(_context, kCGLineJoinRound);
// 判断是否之前有已画的线条，如果有，将之前画的线条全部重绘
if (_lineArray.count > 0) {
}
if (_pointArray.count > 0) {
// 开始绘制
CGContextBeginPath(_context);
// 获取开始的点
CGPoint startPoint = CGPointFromString([_pointArray objectAtIndex:0]);
CGContextMoveToPoint(_context, startPoint.x, startPoint.y);
// 获取最后的点
CGPoint endPoint = CGPointFromString([_pointArray objectAtIndex:(_pointArray.count-1)]);
CGContextAddLineToPoint(_context, endPoint.x, endPoint.y);
CGContextStrokePath(_context);
}
}
#pragma mark ~~~~~~~~~~ 屏幕触发事件 ~~~~~~~~~~
// 手指移动的点
static CGPoint _handPoint;
// 手指移动时调用
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
// 获取点击的对象
UITouch *touch = [touches anyObject];
// 赋值给在视图上移动的点的位置
_handPoint = [touch locationInView:self];
// 将位置转化成字符串保存在位置数组中
NSString *pointStr = NSStringFromCGPoint(_handPoint);
[_pointArray addObject:pointStr];
// 自动调用drawRect方法绘出刚才手指移动的位置
[self setNeedsDisplay];
}2. 绘制矩形
static CGContextRef _context;
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
// 获取图形上下文
_context = UIGraphicsGetCurrentContext();
// 设置线条颜色
CGContextSetRGBStrokeColor(_context, 1, 0, 0, 1);
// 设置线条的宽度
CGContextSetLineWidth(_context, 10.f);
// 设置线条的起点和终点的样式
CGContextSetLineCap(_context, kCGLineCapRound);
//设置线条的转角的样式
CGContextSetLineJoin(_context, kCGLineJoinRound);
// 判断是否之前有已画的线条，如果有，将之前画的线条全部重绘
if (_lineArray.count > 0) {
}
if (_pointArray.count > 0) {
// 开始绘制
CGContextBeginPath(_context);
// 获取开始的点
CGPoint startPoint = CGPointFromString([_pointArray objectAtIndex:0]);
CGContextMoveToPoint(_context, startPoint.x, startPoint.y);
// 获取最后的点
CGPoint endPoint = CGPointFromString([_pointArray objectAtIndex:(_pointArray.count-1)]);
// CGContextAddLineToPoint(_context, endPoint.x, endPoint.y);
// CGContextAddRect(_context, CGRectMake(startPoint.x, startPoint.y, endPoint.x-startPoint.x, endPoint.y-startPoint.y));
CGContextAddEllipseInRect(_context, CGRectMake(startPoint.x, startPoint.y, endPoint.x-startPoint.x, endPoint.y-startPoint.y));
CGContextStrokePath(_context);
}
}
#pragma mark ~~~~~~~~~~ 屏幕触发事件 ~~~~~~~~~~
// 手指移动的点
static CGPoint _handPoint;
// 手指移动时调用
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
// 获取点击的对象
UITouch *touch = [touches anyObject];
// 赋值给在视图上移动的点的位置
_handPoint = [touch locationInView:self];
// 将位置转化成字符串保存在位置数组中
NSString *pointStr = NSStringFromCGPoint(_handPoint);
[_pointArray addObject:pointStr];
// 自动调用drawRect方法绘出刚才手指移动的位置
[self setNeedsDisplay];
}3. 绘制圆
static CGContextRef _context;
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
// 获取图形上下文
_context = UIGraphicsGetCurrentContext();
// 设置线条颜色
CGContextSetRGBStrokeColor(_context, 1, 0, 0, 1);
// 设置线条的宽度
CGContextSetLineWidth(_context, 10.f);
// 设置线条的起点和终点的样式
CGContextSetLineCap(_context, kCGLineCapRound);
//设置线条的转角的样式
CGContextSetLineJoin(_context, kCGLineJoinRound);
// 判断是否之前有已画的线条，如果有，将之前画的线条全部重绘
if (_lineArray.count > 0) {
}
if (_pointArray.count > 0) {
// 开始绘制
CGContextBeginPath(_context);
// 获取开始的点
CGPoint startPoint = CGPointFromString([_pointArray objectAtIndex:0]);
CGContextMoveToPoint(_context, startPoint.x, startPoint.y);
// 获取最后的点
CGPoint endPoint = CGPointFromString([_pointArray objectAtIndex:(_pointArray.count-1)]);
CGContextAddEllipseInRect(_context, CGRectMake(startPoint.x, startPoint.y, endPoint.x-startPoint.x, endPoint.y-startPoint.y));
CGContextStrokePath(_context);
}
}
#pragma mark ~~~~~~~~~~ 屏幕触发事件 ~~~~~~~~~~
// 手指移动的点
static CGPoint _handPoint;
// 手指移动时调用
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
// 获取点击的对象
UITouch *touch = [touches anyObject];
// 赋值给在视图上移动的点的位置
_handPoint = [touch locationInView:self];
// 将位置转化成字符串保存在位置数组中
NSString *pointStr = NSStringFromCGPoint(_handPoint);
[_pointArray addObject:pointStr];
// 自动调用drawRect方法绘出刚才手指移动的位置
[self setNeedsDisplay];
}通过手指绘制自定义线条
声明属性并初始化// 用来保存手指移动位置的数组
static NSMutableArray *_pointArray;
// 用来保存已经画的线条
static NSMutableArray *_lineArray;
// 可变数组初始化
+ (void)initialize {
_pointArray = [NSMutableArray array];
_lineArray = [NSMutableArray array];
}监听屏幕事件
#pragma mark ~~~~~~~~~~ 屏幕触发事件 ~~~~~~~~~~
// 手指移动的点
static CGPoint _handPoint;
// 手指移动时调用
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
// 获取点击的对象
UITouch *touch = [touches anyObject];
// 赋值给在视图上移动的点的位置
_handPoint = [touch locationInView:self];
// 将位置转化成字符串保存在位置数组中
NSString *pointStr = NSStringFromCGPoint(_handPoint);
[_pointArray addObject:pointStr];
// 自动调用drawRect方法绘出刚才手指移动的位置
[self setNeedsDisplay];
}
// 手指移除屏幕时调用
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
// 把刚画线点的位置保存到线条数组中
NSArray *currentLine = [NSArray arrayWithArray:_pointArray];
[_lineArray addObject:currentLine];
// 清空刚画线点的位置
[_pointArray removeAllObjects];
}绘图
static CGContextRef _context;
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
// 获取图形上下文
_context = UIGraphicsGetCurrentContext();
// 设置线条颜色
CGContextSetRGBStrokeColor(_context, 1, 0, 0, 1);
// 设置线条的宽度
CGContextSetLineWidth(_context, 10.f);
// 设置线条的起点和终点的样式
CGContextSetLineCap(_context, kCGLineCapRound);
//设置线条的转角的样式
CGContextSetLineJoin(_context, kCGLineJoinRound);
// 判断是否之前有已画的线条，如果有，将之前画的线条全部重绘
if (_lineArray.count > 0) {
for (int i=0; i<_lineArray.count; i++) {
// 取出第i个线条
NSArray *array = [NSArray arrayWithArray:_lineArray[i]];
// 判断线条是否有点
if (array.count > 0) {
// 开始绘第i条线
[self drawPointArray:array];
}
}
}
// 开始画当前手指移动的线条
[self drawPointArray:_pointArray];
}
#pragma mark ~~~~~~~~~~ 绘图 ~~~~~~~~~~
- (void)drawPointArray:(NSArray *)pointArray {
if (pointArray.count > 0) {
// 开始绘制
CGContextBeginPath(_context);
// 获取开始点
CGPoint startPoint = CGPointFromString([pointArray objectAtIndex:0]);
// 设置线条起点
CGContextMoveToPoint(_context, startPoint.x, startPoint.y);
// 取出剩余的点
for (int j=0; j<pointArray.count-1; j++) {
// 取出每次的最后一个点
CGPoint endPoint = CGPointFromString([pointArray objectAtIndex:j+1]);
// 把结束点加入线条中
CGContextAddLineToPoint(_context, endPoint.x, endPoint.y);
}
// 保存绘制
CGContextStrokePath(_context);
}
}画板Demo
效果图
点击获取示例Demo
仅供参考，错误勿怪！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- iOS之Quartz2D绘图（二）
- Quartz 2D绘图
- iOS Quartz 2D绘图知识详解
- iOS开发UI篇—Quartz2D使用（绘图路径）
- Quartz 2D绘图基础：CGContextRef
- iOS开发-UI高级 Quartz 2D绘图
- iOS开发之Quartz2D 五：UIKIT 绘图演练，画文字，画图片
- iOS_Quartz 2D绘图
- 玩转iOS中的绘图(Quartzs 2D基础篇)
- iOS 学习笔记 Quartz2D绘图
- iOS 2D绘图详解（Quartz 2D）之阴影和渐变(Shadow,Gradient)
- iOS开发UI篇—Quartz2D使用（绘图路径）
- iOS 2D 绘图（Quartz2D）
- iOS开发UI篇—Quartz2D使用（绘图路径）
- iOS笔记052- Quartz2D-绘图
- iOS高级-QuartzCore框架-2D绘图
- [iOS]Quartz2D绘图引擎
- iOS：quartz2D绘图（处理图像,绘制图像并添加水印）
- Quartz2D绘图之利用路径绘制复杂图形
- iOS 2D绘图详解（Quartz 2D）之路径(stroke,fill,clip,subpath,blend)