iOS 2D绘图详解(Quartz 2D)之路径(点,直线,虚线,曲线,圆弧,椭圆,矩形)

原创Blog,转载请注明出处
http://blog.csdn.net/hello_hwc?viewmode=list
我的stackoverflow

profile for Leo on Stack Exchange, a network of free, community-driven Q&A sites


前言:一个路径可以包含由一个或者多个shape以及子路径subpath,quartz提供了很多方便的shape可以直接调用。例如:point,line,Arc(圆弧),Curves(曲线),Ellipse(椭圆),矩形(Rectangle).

对这些path可以进行stroke(描边),也可以进行fill(填充).也可以利用path对一个区域进行截取(clip).

例如,使用截取圆形区域


如果对Quartz的基本概念仍然不清楚的,强烈建议看下我之前的这篇文章,不然不能理解

iOS 2D绘图详解(Quartz 2D)之概述


Points/Lines

Quartz中,使用方法CGContextMoveToPoint移动画笔到一个点来开始新的子路径,使用CGContextAddLineToPoint来从当前开始点添加一条线到结束点,注意,CGContextAddLineToPoint调用后,开始点会重新设置,这知道结束点

举个例子

代码

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext(); //获得当前context
    //设置颜色
    CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
    CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor);
    //为了颜色更好区分,对矩形描边
    CGContextFillRect(context, rect);
    CGContextStrokeRect(context, rect);
    //实际line和point的代码
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);// 设置描边颜色
    CGContextSetLineWidth(context, 4.0);//线的宽度
    CGContextSetLineCap(context, kCGLineCapRound);//线的顶端
    CGContextSetLineJoin(context, kCGLineJoinRound);//线相交的模式

    CGContextMoveToPoint(context,10,10);
    CGContextAddLineToPoint(context, 40, 40);
    CGContextAddLineToPoint(context, 10, 80);
    CGContextStrokePath(context);
}

这里提一下线的顶端模式,使用CGContextSetLineCap来设置,一共有三种

线的相交模式,使用CGContextSetLineJoin 来设置,一共也有三种

虚线
效果

代码

    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    CGContextSetLineWidth(context, 1.0);
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetLineJoin(context, kCGLineJoinRound);
    CGFloat lengths[] = {2};
    CGContextSetLineDash(context, 1, lengths, 1);
    CGContextMoveToPoint(context,10,10);
    CGContextAddLineToPoint(context, 40, 40);
    CGContextAddLineToPoint(context, 10, 80);
    CGContextStrokePath(context);

使用到方法CGContextSetLineDash参数详解

void CGContextSetLineDash (
   CGContextRef _Nullable c,
   CGFloat phase,
   const CGFloat * _Nullable lengths,
   size_t count
);
  • c 绘制的context,这个不用多说
  • phase,第一个虚线段从哪里开始,例如传入3,则从第三个单位开始
  • lengths,一个C数组,表示绘制部分和空白部分的分配。例如传入[2,2],则绘制2个单位,然后空白两个单位,以此重复
  • count lengths的数量

圆弧

Quartz提供了两个方法来绘制圆弧

  • CGContextAddArc,普通的圆弧一部分(以某圆心,某半径,某弧度的圆弧)
  • CGContextAddArcToPoint,用来绘制圆角,下文会详细阐述

CGContextAddArc参数

void CGContextAddArc (
   CGContextRef _Nullable c,
   CGFloat x,
   CGFloat y,
   CGFloat radius,
   CGFloat startAngle,
   CGFloat endAngle,
   int clockwise
);
  • c,context不用剁手
  • x,y指定坐标原点
  • radius,指定半径长度
  • startAngle/endAngle,指定某一段弧度
  • clockwise,1表示顺时针,0表示逆时针
    例如
    这个函数很简单,不放图了
  CGContextAddArc(context,50,50, 25,M_PI_2,M_PI,1);
  CGContextStrokePath(context);

CGContextAddArcToPoint这个方法比较复杂,但是理解了也没那么难
函数体

void CGContextAddArcToPoint (
   CGContextRef _Nullable c,
   CGFloat x1,
   CGFloat y1,
   CGFloat x2,
   CGFloat y2,
   CGFloat radius
);

参数

  • c context
  • x1,y1和当前点(x0,y0)决定了第一条切线(x0,y0)->(x1,y1)
  • x2,y2和(x1,y1)决定了第二条切线
  • radius,想切的半径。

也就是说,
绘制一个半径为radius的圆弧,和上述 两条直线都相切。

代码

    CGContextMoveToPoint(context, 100, 50);
    CGContextAddArcToPoint(context,100,0,50,0, 50);
    CGContextStrokePath(context);

效果

解释为什么

图中的两条红线就是上文提到的两条线,分别是(x0,y0)->(x1,y1)和(x1,y1)->(x2,y2),那么和这两条线都想切的自然就是图中的蓝色圆弧了


椭圆/矩形

比较简单,这里不多赘述

示例

    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
    CGContextAddEllipseInRect(context, CGRectMake(10, 10,40, 20));
    CGContextAddRect(context, CGRectMake(10, 10,40, 20));
    CGContextStrokePath(context);

效果


曲线

Quartz 使用计算机图形学中的多项式来绘制曲线,支持二次和三次曲线。
利用函数CGContextAddCurveToPoint可以绘制三次曲线,
函数体

void CGContextAddCurveToPoint (
   CGContextRef _Nullable c,
   CGFloat cp1x,
   CGFloat cp1y,
   CGFloat cp2x,
   CGFloat cp2y,
   CGFloat x,
   CGFloat y
);

参数

  • c context
  • cp1x,cp1y 第一个控制点
  • cp2x,cp2y 第二个控制点
  • x,y 结束点
    具体效果如图

使用方法CGContextAddQuadCurveToPoint 来绘二次曲线,
函数体,

void CGContextAddQuadCurveToPoint (
   CGContextRef _Nullable c,
   CGFloat cpx,
   CGFloat cpy,
   CGFloat x,
   CGFloat y
);

参数

  • c context
  • cpx,cpy控制点
  • x,y结束点
    效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值