简单绘制图形

最新推荐文章于 2022-11-16 11:34:48 发布

Kamto

最新推荐文章于 2022-11-16 11:34:48 发布

阅读量598

点赞数

CC 4.0 BY-SA版权

分类专栏： ios学习文章标签：绘图

本文链接：https://blog.youkuaiyun.com/Kamto_6/article/details/45220893

ios学习专栏收录该内容

16 篇文章

订阅专栏

本文深入探讨了CoreGraphics和UIBezierPath在iOS应用开发中的使用方法，包括如何设置绘图参数、绘制常见图形及使用UIBezierPath简化绘图流程。详细介绍了矩形、椭圆、曲线等图形的绘制方法，以及如何通过UIBezierPath实现线条、圆等基本形状的绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用Core Graphics绘制

CGContextRef context = UIGraphicsGetCurrentContext();

绘图前设置:

CGContextSetRGBFillColor/CGContextSetFillColorWithColor //填充色
CGContextSetRGBStrokeColor/CGContextSetStrokeColorWithColor //笔颜色
CGContextSetLineWidth //线宽度
绘图后设置:

CGContextDrawPath 

注: 画完图后,先用CGContextStrokePath来描线,后用CGContextFillPath来填充形状内的颜色.

2.常见图形绘制:

CGContextFillRect/CGContextFillRects
CGContextFillEllipseInRect
CGContextAddRect/CGContextAddRects／／矩形
CGContextAddEllipseInRect／／椭圆
CGContextAddQuadCurveToPoint／／二次曲线
CGContextAddArcToPoint／／曲线
CGContextMoveToPoint／／开始点
CGContextAddLineToPoint
CGContextAddLines
CGContextClosePath／／几条线连起来

例如画一个三角形

CGPoint sPoints[3];//坐标点
sPoints[0] =CGPointMake(100, 220);//坐标1
sPoints[1] =CGPointMake(130, 220);//坐标2
sPoints[2] =CGPointMake(130, 160);//坐标3
CGContextAddLines(context, sPoints, 3);//添加线
CGContextClosePath(context);//三条线连起来
CGContextDrawPath(context, kCGPathFillStroke); //根据坐标绘制路径

2 使用UIBezierPath对象

UIBezierPath的使用相当简单，分为三步:  
* 创建path
* 添加路径到path
* 将path绘制出来

例如我们来画条线：

    UIBezierPath *path = [UIBezierPath bezierPath]; 
    // 添加路径[1条点(100,100)到点(200,100)的线段]到path
    [path moveToPoint:CGPointMake(100 , 100)];
    [path addLineToPoint:CGPointMake(200, 100)];

    // 将path绘制出来
    [path stroke];

同样的我们也可以画一个圆

startAngle为开始的弧度，endAngle为 结束的弧度，clockwise 0为顺时针，1为逆时针

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path addArcWithCenter:self.center radius:100.0 startAngle:0.0 endAngle:180.0 clockwise:YES];
    [path stroke];


UIBezierPath颜色的设置并没有包含在自己类中，而是通过UIColor直接设置的。  
例：

    // 设置描边色
    [[UIColor blueColor] setStroke];
    // 设置填充色
    [[UIColor redColor] setFill];

看上去是UIColor的方法，其实也是对于CGContextRef的渲染，最终还是作用到CGConextRef上的  
UIBezierPath其实也就是对CGPathRef的封装

所以UIBezierPath通过UIColor的方法来设置颜色也就不奇怪了。

因为UIColor和UIBezierPath最终还是通过Core Graphics的方法来绘图的，只不过苹果又封装了一层OC。


UIBezierPath类包括bezierPathWithRect: and bezierPathWithOvalInRect:方法去创建椭圆或者矩形形状的path
addQuadCurveToPoint:controlPoint:二次曲线
addCurveToPoint:controlPoint1:controlPoint2:三次曲线
在调用上面两个方法之前要设置当前点。当曲线完成之后，current点会被更新为指定的end point。

例子：

绘制两个椭圆

- (void)drawRect:(CGRect)rect {

     CGMutablePathRef cgPath = CGPathCreateMutable();

    CGPathAddEllipseInRect(cgPath, NULL, CGRectMake(0, 0, 300, 300));

    CGPathAddEllipseInRect(cgPath, NULL, CGRectMake(50, 50, 200, 200));


    UIBezierPath* aPath = [UIBezierPath bezierPath];

    aPath.CGPath = cgPath;

    aPath.usesEvenOddFillRule = YES;

    CGPathRelease(cgPath);

    // 将path绘制出来

     [[UIColor blueColor] setStroke];

     [aPath stroke];

}

UIBezierPath* aPath = [UIBezierPath bezierPathWithOvalInRect:

                           CGRectMake(0, 0, 200, 100)];

    //创建的path相对于原点（0，0）

    // Set the render colors

    [[UIColor blackColor] setStroke];

    [[UIColor redColor] setFill];

    CGContextRef aRef = UIGraphicsGetCurrentContext();

    CGContextSaveGState(aRef);

    //移到（50，50）的位置

    CGContextTranslateCTM(aRef, 50, 50);

    aPath.lineWidth = 5;

    [aPath fill];

    [aPath stroke];

    CGContextRestoreGState(aRef);

这里写图片描述