Quartz2D在项目中的实际使用

最新推荐文章于 2021-03-27 11:06:23 发布
最新推荐文章于 2021-03-27 11:06:23 发布
阅读量275 收藏 1
点赞数 1
分类专栏： iOS 文章标签： quartz2d ios core graphics
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dolacmeng/article/details/104755663
版权

还记得大学刚学iOS那会，从学校图书馆借了本iOS开发的书，有一章节介绍了Quartz2D，当时看得一头雾水，感觉这画画线，画画圆有什么用呢🤔️？工作一段时间后，遇到了一些需求，终于可以把咸丰年学的Quartz2D知识拿出来用一用了💪。下面总结下这些年做项目用到Quartz2D的7个例子。

一.单纯画个圈。

有个项目要模仿呆萌价APP顶部轮播图，然后轮播图后面需要有个圆弧：
在这里插入图片描述
一看到这需求，不简单吗？找UI小姐姐切个圆弧图片就好啦😄。
但是细细一看。wtf🙀。圆弧颜色是随着轮播图一起改变的：
在这里插入图片描述
在这里插入图片描述
也就是圆弧会根据录播图的主色调而改变颜色，或许我们可以麻烦UI小姐姐提供多个颜色的切图。但是这样只能是有限个颜色值了。而且图片多了。。。还增加了包大小🤣🤣。
此时只要用Quartz2D，简单几句代码就解决问题啦，寥寥十几行代码还几乎不增加包大小。

1.新建HYBgView，继承View
2.重写drawRect:方法
-(void)drawRect:(CGRect)rect{
    CGContextRef context = UIGraphicsGetCurrentContext();
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, 0)];
    [path addLineToPoint:CGPointMake(0, 60)];
    [path addQuadCurveToPoint:CGPointMake(kScreenWidth, 60) controlPoint:CGPointMake(kScreenWidth*0.5, 120)];
    [path addLineToPoint:CGPointMake(kScreenWidth, 0)];
    [path closePath];
    
    CGContextAddPath(context, path.CGPath);
    CGContextSetFillColorWithColor(context, [UIColor colorWithHexString:self.hyColor].CGColor);
    CGContextFillPath(context);
}

其中hyColor是我们定义的HYBgView的属性，类型为UIColor：

@interface HYBgView : UIView

@property(nonatomic,strong) NSString *hyColor;

@end
3.重写hyColor的set方法，在修改颜色时让系统进行重绘：
-(void)setHyColor:(NSString *)hyColor{
    _hyColor = hyColor;
    [self setNeedsDisplay];
}
二.带透明窗口的引导图

在老东家太平洋网络做的项目，如下图的一键海报的新手指引图，需求是遮罩层中间有个镂空的矩形，把第一张海报显示出来，其它地方是50%透明度，当时最终实现效果如图：
在这里插入图片描述
我们通过UIBezierPath和CAShapeLayer绘制一张中间镂空（完全透明），其它部分50%透明的遮罩层。

1、新建类PCOnePosterGuide，继承UIView
2、重写drawRect:方法：
- (void)drawRect:(CGRect)rect {
  [super drawRect:rect];
  
  //整个view（如下图，蓝色部分，为方便解释上的颜色，实际效果为50%透明，下同）
  UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:0];
  
  //中间空的部分（如下图：粉红色部分，实际效果为镂空透明）
  UIBezierPath *maskPath;
  CGFloat maskW = (IOS_VERSION>=10.)?64.:50.;
  CGFloat padding = (SCREEN_WIDTH>375)?6.:2.;
  maskPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(SCREEN_WIDTH-maskW-padding, PCSTATUSBAR_HEIGHT+4, maskW, 36.)
                                   byRoundingCorners:UIRectCornerAllCorners
                                         cornerRadii:CGSizeMake(2, 2)];
  [path appendPath:maskPath];
  //使用奇偶性原则，设置填充部分为除去粉色的蓝色部分
  [path setUsesEvenOddFillRule:YES];
  
  CAShapeLayer *fillLayer = [CAShapeLayer layer];
  fillLayer.path = path.CGPath;
  fillLayer.fillRule = kCAFillRuleEvenOdd;
  fillLayer.fillColor = [UIColor blackColor].CGColor;
  fillLayer.opacity = 0.5;
  [self.layer addSublayer:fillLayer];  
}

为了方便解释，上的颜色，实际为透明
在这里插入图片描述

三、排序按钮

如图中的排序按钮（正序/倒序），完全使用Core Graphic进行绘制，可以方便地设置颜色、大小、字体等，而不需要找设计同事拿切图哦😊：
在这里插入图片描述
在这里插入图片描述
绘制代码：

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    if (_title.length > 0) {
		//绘制文字
        CGSize textSize = [_title sizeForFont:[UIFont systemFontOfSize:14] size:CGSizeMake(200, 40) mode:NSLineBreakByClipping];
        CGFloat textW = textSize.width;
        CGFloat textH = textSize.height;
        UIColor *selectColor = self.selectColor?:[UIColor colorWithRed:137/255.0 green:67/255.0 blue:167/255.0 alpha:1.0];
        UIColor *unselectColor = self.unselectColor?:[UIColor colorWithRed:102/255.0 green:102/255.0 blue:102 /255.0 alpha:1.0];
        
        UIColor *textColor = self.type==HYRankTypeNone?unselectColor:selectColor;
        [_title drawInRect:CGRectMake((self.width-textW)/2.0, (self.height-textH)/2.0, textW, self.height) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:14],NSForegroundColorAttributeName:textColor}];

        CGFloat triangleW = self.triangleW>0?self.triangleW:10;
        CGFloat trianglePadding = 4;

        //绘制上三角形
        if (self.type == HYRankTypeNone || self.type == HYRankTypeDown) {
            CGContextSetFillColorWithColor(context, unselectColor.CGColor);
        }else{
            CGContextSetFillColorWithColor(context, selectColor.CGColor);
        }

        CGFloat x1 = (self.width+textW)/2.0+trianglePadding+triangleW/2.0;
        CGFloat y1 = self.height/2.0 - triangleW/2.0 - 1;
        CGContextMoveToPoint(context, x1, y1);

        CGFloat x2 = x1+triangleW/2.0;
        CGFloat y2 = y1+triangleW/2.0;
        CGContextAddLineToPoint(context, x2, y2);

        CGFloat x3 = x1-triangleW/2.0;
        CGFloat y3 = y2;
        CGContextAddLineToPoint(context, x3, y3);

        CGContextClosePath(context);
        CGContextFillPath(context);

        //绘制下三角形
        if (self.type == HYRankTypeNone || self.type == HYRankTypeUp) {
            CGContextSetFillColorWithColor(context, unselectColor.CGColor);
        }else{
            CGContextSetFillColorWithColor(context, selectColor.CGColor);
        }

        CGFloat a1 = x1;
        CGFloat b1 = y1 + triangleW + 2;
        CGContextMoveToPoint(context, a1, b1);

        CGFloat a2 = x2;
        CGFloat b2 = y2 + 2;
        CGContextAddLineToPoint(context, a2, b2);

        CGFloat a3 = x3;
        CGFloat b3 = y3 + 2;
        CGContextAddLineToPoint(context, a3, b3);

        CGContextClosePath(context);
        CGContextFillPath(context);
    }
}

排序按钮我简单地封装到了HYRankView，完整代码及详细使用方法点我

4.继续画画：卡片背景

如图中的卡片背景，也是可以通过Quartz2D快速画出来，又为APP包大小立下功劳～
在这里插入图片描述
绘制代码：

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //左边半圆
    UIBezierPath *leftPath = [UIBezierPath bezierPath];
    CGFloat y = 158;
    [leftPath addArcWithCenter:CGPointMake(0, y) radius:15 startAngle:3/2.0*M_PI endAngle:1/2.0*M_PI clockwise:YES];
    [leftPath closePath];
    CGContextAddPath(context, leftPath.CGPath);
    CGContextSetFillColorWithColor(context, UIColorHex(#F9F8FF).CGColor);
    CGContextFillPath(context);
    
    //右边半圆
    UIBezierPath *rightPath = [UIBezierPath bezierPath];
    CGFloat rightX = kScreenWidth-32;
    [rightPath addArcWithCenter:CGPointMake(rightX, y) radius:15 startAngle:3/2.0*M_PI endAngle:1/2.0*M_PI clockwise:NO];
    [rightPath closePath];
    CGContextAddPath(context, rightPath.CGPath);
    CGContextFillPath(context);

    //中间分割虚线
    CGContextMoveToPoint(context, 30, y);
    CGContextAddLineToPoint(context, kScreenWidth-32-30, y);
    CGContextSetLineWidth(context, 1);
    CGContextSetStrokeColorWithColor(context, UIColorHex(#666666).CGColor);
    CGFloat lengths[] = {3,3};
    CGContextSetLineDash(context, 0, lengths,2);
    CGContextDrawPath(context, kCGPathStroke);
}
5.贝塞尔曲线+动画

这个demo是业余模仿美人相机的，还没用到实际项目上。效果：
在这里插入图片描述
我的另一篇博客写的很详细了，这里就不再累赘：

贝塞尔曲线动画demo（仿美人相机效果）

6.环形进度条

如图。是设计姐姐给的下载进度设计图。
在这里插入图片描述
其实就只画两个圈，一个灰色的圆环和一个根据下载百分比动态变化的黄色圆环。代码：

-(void)drawRect:(CGRect)rect{
    CGContextRef ctx = UIGraphicsGetCurrentContext();//获取上下文
    CGContextSetLineWidth(ctx, _progressWidth); //设置线条宽度

    CGPoint center = CGPointMake(rect.size.width / 2, rect.size.height / 2);  //设置圆心位置
    CGFloat radius = (rect.size.width - 2 * _progressWidth) * 0.5;  //设置半径
    CGFloat startA = - M_PI_2;  //圆起点位置
    CGFloat endA = -M_PI_2 + M_PI * 2 * _progress;  //圆终点位置
    
    UIBezierPath *bgCirclePath = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:0 endAngle:2*M_PI clockwise:YES];
    [[UIColor lightGrayColor] setStroke];//设置描边颜色
    CGContextAddPath(ctx, bgCirclePath.CGPath);//把路径添加到上下文
    CGContextStrokePath(ctx);//渲染

    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
    [UIColorHex(#f3b132) setStroke];
    CGContextAddPath(ctx, path.CGPath);
    CGContextStrokePath(ctx);
}

在改变进度时，请求重新绘制：

-(void)setProgress:(float)progress
{
    _progress = progress;
    [self setNeedsDisplay];
}
七、长度动画

业余接的一个美术学院学生的iPad项目（iPad搜索“傣纸的故事”），需要动态展示一些物件的大小尺寸，也不用麻烦设计，直接Quartz2D+Core Animation搞掂。最终效果如下图：
在这里插入图片描述
核心代码：

1.画出完整的虚线
- (void)drawRect:(CGRect)rect {
    //获得处理的上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    //线条宽
    CGContextSetLineWidth(context, 2.0);
    //线条颜色
    CGContextSetStrokeColorWithColor(context, ColorForDardTheme.CGColor);
    //画虚线
    CGFloat dashArray[] = {3, 1};//表示先画3个实点再画1个虚点，即实点多虚点少表示虚线点大且间隔小，实点少虚点多表示虚线点小且间隔大
    CGContextSetLineDash(context, 1, dashArray, 1);//最后的参数1代表排列的个数
    //起点坐标
    CGContextMoveToPoint(context, 0, rect.size.height/2);
    //终点坐标
    CGContextAddLineToPoint(context, rect.size.width, rect.size.height/2);
    //绘制路径
    CGContextStrokePath(context);

}
2.加一个遮罩动画就动起来啦
-(void)showAnimation:(HYPointLineDirect)direct{
    CGFloat originFrameX,endPositionX;
    switch (direct) {
        case HYPointLineDirectLeft:
            originFrameX = self.bounds.size.width;
            endPositionX = self.bounds.size.width/2;
            break;
        case HYPointLineDirectRight:
            originFrameX = -self.bounds.size.width;
            endPositionX = self.bounds.size.width/2;
            break;
        default:
            originFrameX = self.bounds.size.width;
            endPositionX = self.bounds.size.width/2;
            break;
    }

    UIView *maskView = [[UIView alloc] initWithFrame:CGRectMake(originFrameX, 0, self.frame.size.width, self.frame.size.height)];
        maskView.backgroundColor =  [UIColor colorWithRed:0.5 green:0.5 blue:0.5 alpha:1.0];
    [self setMaskView:maskView];
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position.x"];
    animation.toValue = @(endPositionX);
    animation.duration = 1.0;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeBoth;
    [maskView.layer addAnimation:animation forKey:nil];
}

暂时就记得这几个例子。后面有再更新，
总结就是三步：
1.新建类继承UIView
2.重写drawRect:方法，在方法内画画
3.在需要刷新时调用setNeedsDisplay进行重绘

可怜的我辛苦敲代码之余还抽空写博客✍️，兄弟底部点个赞鼓励下再走嘛🥺～

imJackXu
关注
专栏目录
Quartz2D的基本使用
09-23
在本文中，我们将深入探讨Quartz2D的基本使用，了解其核心概念和常用API，以及如何在实际项目中应用。 一、Quartz2D的核心概念 1. CGContext：Quartz2D的核心是图形上下文（CGContext），它是绘制的基础。...
运用贝塞尔曲线绘制笔锋效果
ZEGO即构科技
10-08 1448
“笔锋”是指用户通过手指、或者鼠标工具在屏幕上拖动模拟真实场景下用笔写文字的效果，文字的书写过程是会根据我们书写的速度实时变化的，通过笔锋算法我们能够模拟出真实场景下书写文字时的线条变化以及结束时的带笔效果。 那么我们如何来绘制笔锋线条呢？ 本文将通过介绍贝塞尔曲线的基本概念以及笔锋轨迹算法，来给大家详细解答如何运用贝塞尔曲线实现绘制笔锋的功能。 一、关于贝塞尔曲线 首先，什么是贝塞尔曲线呢？ 维基百科上介绍，贝塞尔曲线于1962年，由法国工程师皮埃尔·贝兹（Pierre B.
【IOS 开发学习总结-OC-66】Quartz 2D绘图（4-3）——绘制曲线+在内存中绘图+绘制位图
Albert的专栏
10-23 799
【IOS 开发学习总结-OC-66】Quartz 2D绘图（中）——绘制曲线+在内存中绘图+绘制位图绘制曲线Quartz 2D提供了CGContextAddCurveToPoint()和CGContextAddQuadCurveToPoint()两个函数向CGContextRef的当前路径上添加曲线，前者用于添加贝塞尔曲线，后者用于添加二次曲线。绘制贝塞尔曲线的示意图如图12.10所示。从图12.1
贝塞尔曲线 总结
鹰击长空
08-08 1万+
Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义：起始点、终止点（也称锚点）、控制点。通过调整控制点，贝塞尔曲线的形状会发生变化。 1962年，法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法，并给出了详细的计算公式，因此按照这样的公式绘制出来的曲线就用他的姓氏来命名，称为贝塞尔曲线。     以下公式中：B(t)为t时间下 点的
CGCONTEXTADDCURVETOPOINT 的深入理解
mituan1234567的专栏
10-12 750
http://www.mobibrw.com/?p=12 CGContextAddCurveToPoint 这个函数看上去一般般，仔细琢磨发现不简单，为什么三个点就可以确定一条曲线呢？ 网上查了查，小小研究了一下下。 1.关键知识 窃取自 （http://learn.gxtc.edu.cn/NCourse/jxcamcad/cadcam/Mains/main4-2.htm） Be
iOS开发图像处理（一）：绘制动态的贝塞尔曲线
qq_32634407的博客
01-01 2359
iOS开发图像处理（一）：绘制动态的贝塞尔曲线实现效果思路代码 使用UIBezierPath或者CGContext进行图形绘制想必大家应该都比较熟悉了，但笔者最近项目有一个需求是做一个画板工具，需要动态绘制图形和平滑曲线，并且曲线可以编辑和拖动来改变形状。这个需求一拿到就想到要想绘制平滑曲线，最好使用贝塞尔曲线，但要动态绘制就觉得很头疼了，经过研究之后发现还是不难解决的。下面详细讲讲，有类似...
Quartz2D使用案例
09-24
通过学习和实践“Quartz2D使用案例”中的代码，开发者能够掌握如何在实际项目中应用这些技术，创造出美观且高效的2D图形用户界面。这些案例涵盖了基础到高级的Quartz2D使用场景，对于提升iOS和macOS开发技能非常有...
quartz2D绘图代码（使用路径）
04-08
通常，这样的代码会创建一个CGPath对象，添加必要的点，然后在视图的`drawRect:`方法中使用`CGContextAddPath()`和`CGContextDrawPath()`来实际绘制路径。 7. 常见操作： - `CGPathApply()`：对路径上的每个元素...
iOS开发中Quartz2D绘图路径的使用以及条纹效果的实现
09-03
在iOS开发中，Quartz2D是一个强大的2D图形绘制框架，它允许开发者直接操作像素进行复杂的图形绘制。...在实际项目中，可以根据需求选择合适的方法，比如使用渐变、纹理或者组合多种绘图技术来达到预期的条纹效果。
ios-Quartz 2D 简单使用.zip
07-11
Quartz 2D是苹果操作系统中的...在实际项目中，可以结合Core Animation等其他框架，进一步提升动画效果和用户体验。通过学习和实践"Quartz 2D 简单使用"这个压缩包中的示例，你将能够更好地掌握Quartz 2D的使用技巧。
Core Graphics 之 Paths （四）
pengf_wuxiaowu的博客
08-27 251
Paths path定义了一个或多个形状或子路径。子路径可以由直线、曲线或两者组成。它可以是打开的路径可以是关闭的路径。子路可以是简单的形状，如直线、圆形、矩形或星形，也可以是更复杂的形状，如山脉的轮廓或抽象的涂鸦。图3-1显示了可以创建的一些路径。直线(在图的左上角)被虚线;线条也可以是实心的。弯弯曲曲的路径(在中间的顶部)由几条曲线组成，是一条开放的路...
根据离散点画直线,iOS离散点画曲线
weixin_39820185的博客
03-27 406
在iOS开发过程中，我们会经常遇到画线的功能，比如线性图。目前iOS画线有两大类方法 (我所知道的)。1、基于CoreGraphics.framework的CGContext；2、基于UIKit.framework、QuartzCore.framework的UIBezierPath、CAShapeLayer。方法一、CGContextCGContext是一个结构体。下面列举与画线相关的方法：//绘...
iOS: CGContext的函数CGContextAddQuadCurveToPoint
Alisa200920的专栏
07-31 2181
void CGContextAddQuadCurveToPoint ( CGContextRef c, CGFloat cpx, CGFloat cpy, CGFloat x, CGFloat y);
贝塞尔曲线基本用法
auspark的专栏
11-02 2420
使用UIBezierPath可以创建基于矢量的路径，此类是Core Graphics框架关于路径的封装。使用此类可以定义简单的形状，如椭圆、矩形或者有多个直线和曲线段组成的形状等。 UIBezierPath是CGPathRef数据类型的封装。如果是基于矢量形状的路径，都用直线和曲线去创建。我们使用直线段去创建矩形和多边形，使用曲线去创建圆弧（arc）、圆或者其他复杂的曲线形状。 1.使用UIBezierPath画图步骤： 2.创建一个UIBezierPath对象 3.调用-moveToPoint:设
疯狂ios讲义之绘制曲线
brasbug的专栏
02-26 827
Quartz 2D提供了CGContextAddCurveToPoint()和CGContextAddQuadCurveToPoint()两个函数向CGContextRef的当前路径上添加曲线，前者用于添加贝塞尔曲线，后者用于添加二次曲线。 绘制贝塞尔曲线的示意图如图12.10所示。从图12.10可以看出，确定一条贝塞尔曲线需要4个点：开始点、第一个控制点、第二个控制点和结束点。
UIBezierPath详解
薛国宾的专栏
05-04 1万+
使用UIBezierPath类可以创建基于矢量的路径，这个类在UIKit中。此类是Core Graphics框架关于path的一个封装。使用此类可以定义简单的形状，如椭圆或者矩形，或者有多个直线和曲线段组成的形状。 Bezier Path 基础     UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的，都用直线和曲线段去创建。我们使用直
IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)...
jishublog
08-12 1152
首先了解一下CGContextRef: An opaque type that represents a Quartz 2D drawing environment. Graphics Context是图形上下文,可以将其理解为一块画布,我们可以在上面进行绘画操作,绘制完成后,将画布放到我们的view中显示即可,view看作是一个画框. 自己学习时实现的demo，希望对大家有帮助，具体的实现...
iOS UIBezierPath类 介绍
热门推荐
小邓笔记
09-04 3万+
使用UIBezierPath类可以创建基于矢量的路径，这个类在UIKit中。此类是Core Graphics框架关于path的一个封装。使用此类可以定义简单的形状，如椭圆或者矩形，或者有多个直线和曲线段组成的形状。      1.Bezier Path 基础    UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的，都用直线和曲线段去创建。我们使用直
使用Bezier Paths[转]
weixin_30867015的博客
03-27 230
使用UIBezierPath类可以创建基于矢量的路径。此类是Core Graphics框架关于path的一个封装。使用此类可以定义简单的形状，如椭圆或者矩形，或者有多个直线和曲线段组成的形状。1.Bezier Path 基础UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的，都用直线和曲线段去创建。我们使用直线段去创建矩形和多边形，使用曲线段...
iOS开发揭秘：Quartz2D核心技术与自定义UI详解
iOS开发中的Quartz2D是一个强大的二维绘图引擎，它不仅适用于iOS系统，也支持Mac平台。...在实际项目中，结合Quartz2D与其他图形处理技术，如CoreImage和CoreAnimation，可以打造出更加丰富多彩的用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值