关闭

iOS Quartz2D的基本图形绘制

标签: 基础知识OCquartz图形2d
792人阅读 评论(0) 收藏 举报
分类:

Quartz2D的基本功能介绍

drawRect方法的调用时机:

1.当View第一次被显示到屏幕的时候,系统会创建一个跟View相关的Layer上下文
2.系统会通过此上下文,在drawRect的方法中绘制好渲染到Layer上
3.如果要重新绘制,直接调用drawRect是无效的,我们需要调用setNeedsDisplay或者setNeedsDisplayInRect
4.而且setNeedDssplay或者setNeedsDisplayInRect不是立马调用的,而是在下一次屏幕刷新的时候把绘制上去的内容渲染出来


1.直线

-(void)drawNormalLine:(CGContextRef)ctx
{
    // 设置起点
    CGContextMoveToPoint(ctx, 50, 50);
    // 设置重点
    CGContextAddLineToPoint(ctx, 150, 50);
    // 设置绘制线的宽度
    CGContextSetLineWidth(ctx, 10);
    
//***********************设置颜色的三个方法******************//
    // 设置线的颜色 方法1 参数为RGB的三个小数
    //CGContextSetRGBStrokeColor(ctx, 1, 0.8, 0.03, 1);
    
    // 设置线的颜色 方法2 参数是浮点RGBA数组
    //const CGFloat f[] = {0.124,0.124,0.124,1};
    //CGContextSetStrokeColor(ctx, f);
    
    // 设置线的颜色 方法3 OC方法,简单粗暴
    [[UIColor redColor] set];
//***********************设置颜色的三个方法******************//
    
    // 设置线的样式为圆角
    CGContextSetLineCap(ctx, kCGLineCapRound);
    // 线是不能进行实心渲染的,小朋友要注意啦
//    CGContextFillPath(ctx);
    // 渲染到Layer上(空心线)
    CGContextStrokePath(ctx);
}
效果如下:


2.三角形

- (void)drawTriangle:(CGContextRef)ctx
{
    // 绘制三角形
    // 起点
    CGContextMoveToPoint(ctx, 50, 100);
    // 设置第二个点
    CGContextAddLineToPoint(ctx, 150, 100);
    // 设置第三个点
    CGContextAddLineToPoint(ctx, 100, 200);
    // 设置终点(此操作可以省略,只要执行了ClosePath,默认回到起点,也就是终点)
//    CGContextAddLineToPoint(ctx, 50, 100);
    CGContextClosePath(ctx);
    // 设置颜色
    [[UIColor redColor] set];
    // 渲染到Layer(空心)
//    CGContextStrokePat(ctx);
    // 渲染实心
    CGContextFillPath(ctx);
}
效果如下:


3.圆和四边形


// 园
- (void)drawCircle:(CGContextRef)ctx
{
    
    // 第一个参数:上下文
    // 第二个参数:圆心X轴
    // 第三个参数:圆心Y轴
    // 第四个参数:半径
    // 第五个参数:开始弧度
    // 第六个参数:结束弧度
    // 第七个参数:圆弧方向(0 顺时针 1 逆时针)
    CGContextAddArc(ctx, 250, 300, 50, 0, 2 * M_PI, 0);
    
    
    CGContextStrokePath(ctx);
    
}
// 四边形
- (void)drawRectangle:(CGContextRef)ctx
{
    // 绘制四边形,有现成的方法可以调用
    CGContextAddRect(ctx, CGRectMake(50, 250, 100, 30));
    // 设置颜色
    [[UIColor greenColor] set];
    // 空心绘制
//    CGContextStrokePath(ctx);
    // 实心绘制
    CGContextFillPath(ctx);
}
效果如下:


4.饼状图

// 饼状图
- (void)drawPie:(CGContextRef)ctx
{
    // 起点
    CGContextMoveToPoint(ctx, 230, 100);
    // 绘制line长100的线
    CGContextAddLineToPoint(ctx, 230, 200);
    // 绘制圆 左边 230 100 半径 100 起点 m_pi,终点 -M_PI/3.2 逆时针
    CGContextAddArc(ctx, 230, 100, 100, M_PI / 2, -M_PI/3.2, 1);
    // 关闭路径
    CGContextClosePath(ctx);
    // 设置填充色
    CGContextSetRGBFillColor(ctx, 0.5, 1, 0, 1);
    CGContextFillPath(ctx);
}

效果如下:



5.画多个

-(void)drawFang:(CGContextRef)context

{//画一个 Rect
    CGContextSetRGBStrokeColor(context, 255, 100, 100, 1);
    CGContextSetLineWidth(context, 2.0);
    CGContextAddRect(context, CGRectMake(50, 50, 200, 300));//画一个Rect
    
    CGRect rcts[4];//画多个Rect
    rcts[0] = CGRectMake(100, 100, 200, 200);
    rcts[1] = CGRectMake(90, 110, 200, 200);
    rcts[2] = CGRectMake(80, 120, 200, 200);
    rcts[3] = CGRectMake(70, 130, 200, 200);
    CGContextAddRects(context, rcts, 4);//代表要画4个rect
    
    CGContextStrokePath(context);
}


6.以上是传统的方式,来一个用UIBezierPath重绘

// 用贝塞尔曲线画图
- (void)userUIBezierPathDraw
{
    // 创建画圆形的对象
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 50, 50)];
    // 设置填充颜色
    [[UIColor greenColor] setFill];
    // 填充
    [path fill];
    // 设置描边
    [[UIColor blackColor] setStroke];
    // 描边
    [path stroke];
    
    UIBezierPath *path2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 20, 50, 50)];
    [[UIColor greenColor] setFill];
    [path2 fill];
    [[UIColor blackColor] setStroke];
    [path2 stroke];
    
    
    // 创建画曲线的贝塞尔对象
    UIBezierPath *path3 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(85, 85) radius:30 startAngle:0 endAngle:M_PI clockwise:YES];
    // 宽度
    path3.lineWidth = 10;
    // 颜色描边
    [[UIColor redColor] setStroke];
    [path3 stroke];
    
    // 画个波浪线
    UIBezierPath *path4 = [UIBezierPath bezierPath];
    [path4 moveToPoint:CGPointMake(20, 200)];
    // 参数1 终点
    // 参数2 控制点1
    // 参数3 控制点2
    [path4 addCurveToPoint:CGPointMake(335, 300) controlPoint1:CGPointMake(160, 0) controlPoint2:CGPointMake(200, 600)];
    path4.lineWidth = 5;
    path4.lineCapStyle = kCGLineCapRound;
    [path4 stroke];
}
效果如下:




OK~~~~~~~~~~~~~~~


0
1

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:218780次
    • 积分:3254
    • 等级:
    • 排名:第10863名
    • 原创:99篇
    • 转载:9篇
    • 译文:1篇
    • 评论:136条
    最新评论