iOS开发CGContextRef画图使用总结

本文实例为大家汇总了iOS开发CGContextRef画图使用,供大家参考,具体内容如下

1.创建画布

CGContextRef ctx = UIGraphicsGetCurrentContext();

2.设置属性

//旋转,注意:设置操作必须要在添加图形之前,如果设置在添加图形之后的话,此时它已经画完了,无效
//旋转的时候,是整个layer都旋转了
//旋转45度
CGContextRotateCTM(ctx, M_PI_4);
//缩放:x方向缩放0.5倍,y方向缩放1.5倍
CGContextScaleCTM(ctx, 0.5, 1.5);
//平移:x方向移动50,y方向移动100
CGContextTranslateCTM(ctx, 50, 100);
CGContextSetLineJoin(ctx, kCGLineJoinRound);
//线条宽度
CGContextSetLineWidth(ctx, 1.0);
//起点和终点圆角
CGContextSetLineCap(ctx, kCGLineCapRound);
//转角圆角
CGContextSetLineJoin(ctx, kCGLineJoinRound);
//透明度
CGContextSetAlpha(ctx, 0.5)

3.画直线

//起点
CGContextMoveToPoint(ctx, 10.0, 100.0);
//终点
CGContextAddLineToPoint(ctx, self.frame.size.width-20.0, 100.0);
//颜色 两种设置颜色的方式都可以
//CGContextSetRGBStrokeColor(ctx, 0, 1.0, 0, 1.0);
[[UIColor redColor] set];
//渲染,直线只能绘制空心的,不能调用CGContextFillPath(ctx)
// 或者使用这个方法:CGContextDrawPath(ctx, kCGPathStroke);
CGContextStrokePath(ctx);

或者使用下面方法画直线

CGPoint point[2];//坐标点  
point[0] = CGPointMake(10.0, 100.0);//起点  
point[1] = CGPointMake(self.frame.size.width-20.0, 100.0);//终点   
//points[]坐标数组,和count大小  
CGContextAddLines(context, aPoints, 2);//添加线  
CGContextDrawPath(context, kCGPathStroke);

4.画虚线

//设置虚线颜色
CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
//设置虚线绘制起点
CGContextMoveToPoint(ctx, 10.0, 50.0);
//设置虚线绘制终点
CGContextAddLineToPoint(ctx, self.frame.size.width-20.0, 50.0);
//设置虚线排列的宽度间隔:下面的arr中的数字表示先绘制3个点再绘制1个点
CGFloat arr[] = {3, 2};
//下面最后一个参数“2”代表排列的个数。
CGContextSetLineDash(ctx, 0, arr, 2);
CGContextDrawPath(ctx, kCGPathStroke);

5.画三角形

//起点
CGContextMoveToPoint(ctx, self.center.x, 200.0);
//拐点1
CGContextAddLineToPoint(ctx, self.center.x-50.0, 250.0);
//终点
CGContextAddLineToPoint(ctx, self.center.x+50.0, 250.0);
//颜色 两种设置颜色的方式都可以
//CGContextSetRGBStrokeColor(ctx, 0, 1.0, 0, 1.0);
[[UIColor redColor] set];
//合并三角形
CGContextClosePath(ctx);
CGContextFillPath(ctx);

6.画矩形

CGRect rectangle = CGRectMake(10.0, 300.0, self.frame.size.width-20.0, 60.0);
CGContextAddRect(ctx, rectangle);
CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextFillPath(ctx);

7.画圆

/**
c           当前图形
x           圆心坐标x
y           圆心坐标y
radius      半径
startAngle  弧的起点与正X轴的夹角
endAngle    弧的终点与正X轴的夹角
clockwise   指定0创建一个顺时针的圆弧,或是指定1创建一个逆时针圆弧
*/
CGContextAddArc(ctx, self.center.x, 100.0, 75.0, 0.0, M_PI+0.5, 0);
CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextFillPath(ctx);

8.画椭圆

CGContextAddEllipseInRect(ctx, CGRectMake(x, y, 100.0, 60.0));
CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextFillPath(ctx);

9.画扇形

CGContextMoveToPoint(ctx, x, y);
CGContextAddArc(ctx, x, y, 75.0, 0.0, M_PI+0.5, 0);
CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextSetStrokeColorWithColor(ctx, [UIColor blueColor].CGColor);
CGContextDrawPath(ctx, kCGPathFillStroke);

10.画二次贝塞尔曲线

CGContextMoveToPoint(context, 120, 300);//设置Path的起点  
CGContextAddQuadCurveToPoint(context,190, 310, 120, 390);//设置贝塞尔曲线的控制点坐标和终点坐标  
CGContextStrokePath(context);

11.画三次贝塞尔曲线

CGContextMoveToPoint(context, 200, 300);//设置Path的起点  
CGContextAddCurveToPoint(context,250, 280, 250, 400, 280, 300);//设置贝塞尔曲线的控制点坐标和控制点坐标终点坐标  
CGContextStrokePath(context);

12.画文字

// 设置文字的属性
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
dict[NSForegroundColorAttributeName] = [UIColor whiteColor];
dict[NSFontAttributeName] = [UIFont systemFontOfSize:14];
[@"I Love iOS" drawInRect:rect withAttributes:dict];

13.画图片

UIImage *image = [UIImage imageNamed:@"apple.jpg"];  
[image drawInRect:CGRectMake(60, 340, 20, 20)];//在坐标中画出图片  
//[image drawAtPoint:CGPointMake(100, 340)];//保持图片大小在point点开始画图片,可以把注释去掉看看  
CGContextDrawImage(context, CGRectMake(100, 340, 20, 20), image.CGImage);//使用这个使图片上下颠倒了      
//CGContextDrawTiledImage(context, CGRectMake(0, 0, 20, 20), image.CGImage);//平铺图 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2022-04-26

iOS绘制专属于程序猿的浪漫爱心

近来无事,想想IT该怎样才能彰显浪漫情怀,不能口头上说说而已,最关键的是要有可视化的东西展示出来才行- 废话不多说,直接上Demo HeartView.h // // HeartView.h // DrawHeart // // Created by WQL on 16/3/1. // Copyright © 2016年 WQL. All rights reserved. // #import <UIKit/UIKit.h> @interface HeartView : UIView /**

IOS 开发中画扇形图实例详解

IOS 开发中画扇形图实例详解 昨天在做项目中,遇到一个需要显示扇形图的功能,网上搜了一下,发现code4app里面也没有找到我想要的那种类似的效果,没办法了,只能自己学习一下如何画了. 首先我们需要了解一个uiview的方法 -(void)drawRect:(CGRect)rect 我们知道了这个方法,就可以在自定义UIView的子类的- (void)drawRect:(CGRect)rect里面绘图了,关于drawrect的调用周期,网上也是一找一大堆,等下我会整理一下,转载一篇供你们参考.

iOS开发中使用Quartz2D绘图及自定义UIImageView控件

绘制基本图形 一.简单说明 图形上下文(Graphics Context):是一个CGContextRef类型的数据 图形上下文的作用:保存绘图信息.绘图状态 决定绘制的输出目标(绘制到什么地方去?)(输出目标可以是PDF文件.Bitmap或者显示器的窗口上) 相同的一套绘图序列,指定不同的Graphics Context,就可将相同的图像绘制到不同的目标上. Quartz2D提供了以下几种类型的Graphics Context: Bitmap Graphics Context PDF Grap

iOS使用Charts框架绘制饼状图

首先先看一下效果: 饼状图 一.创建饼状图对象 创建饼状图对象用到类是PieChartView.h, 代码如下: self.pieChartView = [[PieChartView alloc] init]; self.pieChartView.backgroundColor = BgColor; [self.view addSubview:self.pieChartView]; [self.pieChartView mas_makeConstraints:^(MASConstraintMak

iOS新增绘制圆的方法实例代码

iOS 的坐标系和我们几何课本中的二维坐标系并不一样! # BezierPath绘制圆弧 使用 UIBezierPath 进行绘制圆弧的方法,通常会直接使用 addArc : addArc(withCenter:, radius:, startAngle:, endAngle:, clockwise:) 或者使用 addCurve 进行拟圆弧: addCurve(to:, controlPoint1:, controlPoint2:) 其实我们可以通过,两个坐标点(startPoint & en

IOS绘制动画颜色渐变折线条

先给大家展示下效果图: 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有的也使用了动画,但是线条颜色渐变的折线图的demo少之又少,甚至可以说没有.该Blog阐述了动画绘制线条颜色渐变的折线图的实现方案,以及折线图线条颜色渐变的实现原理,并附以完整的示例. 成果 本人已将折线图封装到了一个UIView子类中,并提供了相应的接口.该自定义折线图视图,基本上可以适用于大部分需要集成折线图的项目.若你

iOS画出精美的图表方法示例

前言 iOS端画图表的库很多,今天给大家介绍一款很有名的库 - Charts 借助Charts,我们可以画出很精美的折线图.柱状图.饼状图.K线.雷达.混合图表等等 github地址 (本地下载) 1.集成Charts 这里只是做一个简略说明,具体的可以参考官方的集成方法 Charts 如果使用的Swift开发,可以直接import Charts 如果使用OC开发,则需要混编,建立ProjectName-Bridging-Header.h桥接文件,这里详细介绍混编开发 利用CocoaPods,在

IOS绘制虚线的方法总结

一.重写drawRect方法. - (void)drawRect:(CGRect)rect { [super drawRect:rect]; CGContextRef currentContext = UIGraphicsGetCurrentContext(); //设置虚线颜色 CGContextSetStrokeColorWithColor(currentContext, [UIColor BlackColor].CGColor); //设置虚线宽度 CGContextSetLineWidt

iOS App开发中用CGContextRef绘制基本图形的基本示例

Graphics Context是图形上下文,也可以理解为一块画布,我们可以在上面进行绘画操作,绘制完成后,将画布放到我们的view中显示即可,view看作是一个画框. CGContextRef功能强大,我们借助它可以画各种图形.开发过程中灵活运用这些技巧,可以帮助我们提供代码水平. 首先创建一个集成自UIView的,自定义CustomView类. 在CustomView.m中实现代码. 复制代码 代码如下: #import <QuartzCore/QuartzCore.h> 覆盖DranRe

iOS使用Charts框架绘制折线图

首先先看一下效果: 折线图 一. 初始化折线图对象 创建一个折线图的用到的类是LineChartView.h, 代码如下: self.LineChartView = [[LineChartView alloc] init]; self.LineChartView.delegate = self;//设置代理 [self.view addSubview:self.LineChartView]; [self.LineChartView mas_makeConstraints:^(MASConstra

iOS使用Charts框架绘制柱形图

首先看一下最终要实现的效果: 最终效果 一.初始化barChartView 绘制柱形图需要用到BarChartView这个类,下面是初始化代码: self.barChartView = [[BarChartView alloc] init]; self.barChartView.delegate = self;//设置代理 [self.view addSubview:self.barChartView]; [self.barChartView mas_makeConstraints:^(MASC

ios开发一个好看的折线图

一:介绍 在项目中遇到数据展示需求时,往往会通过,以列表的形式展示出数据或者以表格的形式展示.但是并不能直观的观察数据的变化,如果通过图表的形式来展示,就可以更快捷的获取到数据变化情况. 图表展示的方式大致分为折线图.柱状图.饼状图等等,那么如何码出一个高颜值原生折线图呢?demo源码已经放在GitHub上,下面来介绍一下如何使用. 二:项目展示 运行后的展示截图如下: 三: 实现思路分析 实现折线图的核心代码是下面四个类: FBYLineGraphBaseView FBYLineGraphCo

python使用matplotlib绘制折线图教程

matplotlib简介 matplotlib 是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地行制图.而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中. 它的文档相当完备,并且Gallery页面中有上百幅缩略图,打开之后都有源程序.因此如果你需要绘制某种类型的图,只需要在这个页面中浏览/复制/粘贴一下,基本上都能搞定. 在Linux下比较著名的数据图工具还有gnuplot,这个是免费的,Python有一个包可以调用gnuplot,但是语法比较不

Python基于Matplotlib库简单绘制折线图的方法示例

本文实例讲述了Python基于Matplotlib库简单绘制折线图的方法.分享给大家供大家参考,具体如下: Matplotlib画折线图,有一些离散点,想看看这些点的变动趋势: import matplotlib.pyplot as plt x1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13] y1=[30,31,31,32,33,35,35,40,47,62,99,186,480] x2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 1

JS+html5 canvas实现的简单绘制折线图效果示例

本文实例讲述了JS+html5 canvas实现的简单绘制折线图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>画图</title> <style> #divContainer{ margin-top: 20px; text-align: center; } #cv{ width: 300px;

PHP中使用GD库绘制折线图 折线统计图的绘制方法

在PHP中,有一些简单的图像函数是可以直接使用的,但大多数要处理的图像,都需要在编译PHP时加上GD库.除了安装GD库之外,在PHP中还可能需要其他的库,这可以根据需要支持哪些图像格式而定.GD库可以在http://www.boutell.com/gd/免费下载,不同的GD版本支持的图像格式不完全一样,最新的GD库版本支持GIF.JPEG.PNG.WBMP.XBM等格式的图像文件,此外还支持一些如FreeType.Type 1等字体库.通过GD库中的函数可以完成各种点.线.几何图形.文本及颜色的

jquery.flot.js简单绘制折线图用法示例

本文实例讲述了jquery.flot.js简单绘制折线图用法.分享给大家供大家参考,具体如下: 1.完整实例代码: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>折线图</title> <!--[if lte IE 8]> <script language="javascript" type="text/javas

PHP使用JpGraph绘制折线图操作示例【附源码下载】

本文实例讲述了PHP使用JpGraph绘制折线图操作.分享给大家供大家参考,具体如下: 下载jpgraph类库,使用的是src目录下的类文件. require_once './src/jpgraph.php'; require_once './src/jpgraph_line.php'; //创建统计图对象,宽,高 $graph = new Graph(1993, 766); //设置背景,注意要把主题给换掉 $graph->SetBackgroundImage('./bg.jpg',2); /

JavaScript canvas绘制折线图

本文实例为大家分享了canvas绘制折线图的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head&g