iOS开发-Quartz 2D动态绘图上下波动展示_ios quartz2d画图 demo-优快云博客

本文链接：https://blog.youkuaiyun.com/ZZ_IOSdeveloper/article/details/66973220

本文介绍了一个基于Quartz2D技术实现的动态绘图界面项目，详细解析了动态绘图的实现原理及代码实现过程，包括如何利用CGContext进行路径绘制、设置颜色和线宽等关键步骤。

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

今天呢给同学讲解一个项目中非常常用的动态绘图界面！以及实现原理解析和思路分析还有Quart 2D的使用！那么废话不多说直接上代码!

// ZZQuartz2DView.h

// 08-动态绘图

// Created by 周昭 on 2017/3/27.

#import <UIKit/UIKit.h>

// 定义屏幕尺寸适配修改

#define kSCREEN_WIDTH [UIScreen mainScreen].bounds.size.width

#define kSCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height

@interface ZZQuartz2DView : UIView

+ (instancetype)quartz2DView;

@end

// ZZQuartz2DView.m

// 08-动态绘图

// Created by 周昭 on 2017/3/27.

#import "ZZQuartz2DView.h"

@interface ZZQuartz2DView()

/**

* 头像

@property (nonatomic, weak) UIButton *iconBtn;

/**

* 湿度

@property (nonatomic, assign) CGFloat hum;

/**

* 温度

@property (nonatomic, assign) CGFloat tem;

@end

@implementation ZZQuartz2DView

- (void)drawRect:(CGRect)rect

{

#warning - 接收数据然后赋值

self.hum += 0.01;

if (self.hum >= 1.0) { // 对湿度要特殊处理

self.hum = 0.0;

}

self.tem += 0.01;

if (self.tem >= 1.0) {

self.tem = 0.0;

}

// 1.左侧外弧

CGContextRef ctx1 = UIGraphicsGetCurrentContext();

CGContextSetLineWidth(ctx1, 15.0);//线的宽度

CGContextSetRGBStrokeColor(ctx1, 230/255.0, 230/255.0, 230/255.0, 1);//改变画笔颜色

#warning - 贝塞尔曲线

CGContextAddArc 中的参数：

context 图形上下文

CGFloat x 圆心横坐标

CGFloat y 圆心纵坐标

CGFloat radius 半径

CGFloat startAngle 开始角度

CGFloat endAngle 结束角度

clockwise 圆弧的方向 (0:顺时针 1:逆时针)

CGContextAddArc(ctx1, kSCREEN_WIDTH / 2, kSCREEN_HEIGHT * 3/10, kSCREEN_WIDTH/2 - 40, -M_PI*7/6, -M_PI*5/6, 0);

CGContextSetLineCap(ctx1, kCGLineCapRound);//设置首尾样式

CGContextStrokePath(ctx1);//绘画路径

// 2.左侧内弧

CGContextRef smallCtx1 = UIGraphicsGetCurrentContext();

CGContextSetLineWidth(smallCtx1, 8);//线的宽度

CGContextSetRGBStrokeColor(smallCtx1, 145/255.0, 216/255.0, 220/255.0, 1);//改变画笔颜色

CGContextAddArc(smallCtx1, kSCREEN_WIDTH / 2, kSCREEN_HEIGHT * 3/10, kSCREEN_WIDTH/2 - 40, -M_PI*7/6 , - M_PI*5/6 - M_PI/3*(0.9999 - self.hum), 0);

CGContextSetLineCap(smallCtx1, kCGLineCapRound);//设置首尾样式

CGContextStrokePath(smallCtx1);//绘画路径

// 3.右侧外弧

CGContextRef ctx2 = UIGraphicsGetCurrentContext();

CGContextSetLineWidth(ctx2, 15.0);//线的宽度

CGContextSetRGBStrokeColor(ctx2, 230/255.0, 230/255.0, 230/255.0, 1);//改变画笔颜色

CGContextAddArc(ctx2, kSCREEN_WIDTH / 2, kSCREEN_HEIGHT * 3/10, kSCREEN_WIDTH/2 - 40, M_PI/6, -M_PI/6, 1);

#warning - x1,y1跟p1形成一条线的坐标p2，x2,y2结束坐标跟p3形成一条线的p3,radius半径,注意, 需要算好半径的长度, CGContextAddArcToPoint(context, 148, 68, 148, 180, 100);

CGContextSetLineCap(ctx2, kCGLineCapRound);//设置首尾样式

CGContextStrokePath(ctx2);//绘画路径

// 4.右侧内弧

CGContextRef smallCtx2 = UIGraphicsGetCurrentContext();

CGContextSetLineWidth(smallCtx2, 8);//线的宽度

CGContextSetRGBStrokeColor(smallCtx2, 222/255.0, 208/255.0, 229/255.0, 1);//改变画笔颜色

CGContextAddArc(smallCtx2, kSCREEN_WIDTH / 2, kSCREEN_HEIGHT * 3/10, kSCREEN_WIDTH/2 - 40, M_PI*1/6, M_PI*1/6 - M_PI/3*(self.tem + 0.0001), 1);

CGContextSetLineCap(smallCtx2, kCGLineCapRound);//设置首尾样式

CGContextStrokePath(smallCtx2);//绘画路径

}

+ (instancetype)quartz2DView

{

return [[self alloc] init];

}

#pragma mark - 通过init方法初始化

- (instancetype)initWithFrame:(CGRect)frame

{

if (self = [super initWithFrame:frame]) {

[self setUpSubViews];

}

return self;

}

#pragma mark - 通过解档/加载xib/或者storyboard初始化

- (instancetype)initWithCoder:(NSCoder *)decoder

{

if (self = [super initWithCoder:decoder]) {

[self setUpSubViews];

}

return self;

}

/**

* 初始化所有的子控件并且进行一次性设定

- (void)setUpSubViews

{

UIButton *iconBtn = [[UIButton alloc] init];

iconBtn.backgroundColor = [UIColor yellowColor];

[self addSubview:iconBtn];

self.iconBtn = iconBtn;

[NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(setNeedsDisplay) userInfo:nil repeats:YES];

}

#pragma mark - 拿到真实的尺寸后在这里进行子控件的布局

- (void)layoutSubviews

{

#warning - 一定要调用super

[super layoutSubviews];

CGFloat iconBtnX = self.frame.size.width * 0.5;

CGFloat iconBtnH = 180;

CGFloat iconBtnY = 100 + iconBtnH * 0.5;

CGFloat iconBtnW = iconBtnH;

self.iconBtn.layer.cornerRadius = iconBtnW / 2;

self.iconBtn.center = CGPointMake(iconBtnX, iconBtnY);

self.iconBtn.bounds = CGRectMake(0, 0, iconBtnW, iconBtnH);

}

@end

// ZZViewController.h

// 08-动态绘图

// Created by 周昭 on 2017/3/27.

#import <UIKit/UIKit.h>

@interface ZZViewController : UIViewController

@end

// ZZViewController.m

// 08-动态绘图

// Created by 周昭 on 2017/3/27.

#import "ZZViewController.h"

#import "ZZQuartz2DView.h"

@interface ZZViewController ()

@property (nonatomic, weak) ZZQuartz2DView *quartz2DView;

@end

@implementation ZZViewController

- (void)viewDidLoad {

// 1.初始化界面

[self setUpQuartz2DView];

}

#pragma mark - setUp初始化

/**

* 动态绘图view

- (void)setUpQuartz2DView

{

ZZQuartz2DView *quartz2DView = [ZZQuartz2DView quartz2DView];

quartz2DView.backgroundColor = [UIColor whiteColor];

#warning - 根据自己写的来设定frame

CGFloat quartz2DViewX = 0;

CGFloat quartz2DViewY = 64;

CGFloat quartz2DViewW = self.view.frame.size.width;

CGFloat quartz2DViewH = self.view.frame.size.height * 0.5;

quartz2DView.frame = CGRectMake(quartz2DViewX, quartz2DViewY, quartz2DViewW, quartz2DViewH);

[self.view addSubview:quartz2DView];

self.quartz2DView = quartz2DView;

}

@end