先来看个效果:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

新建视图类。在直接加入代码:

  1. // Only override drawRect: if you perform custom drawing.
  2. // An empty implementation adversely affects performance during animation.
  3. - (void)drawRect:(CGRect)rect
  4. {
  5. // 获取当前环境
  6. CGContextRef context = UIGraphicsGetCurrentContext();
  7.  
  8. // 保存当前环境,便于以后恢复
  9. CGContextSaveGState(context);
  10.  
  11. // 把数据组织起来
  12. for (int i = 0; i < self.dataArray.count; i++)
  13. {
  14. NSString * x_data = self.dataArray[i][@"xxx"];
  15. NSString * y_data = self.dataArray[i][@"yyyy"];
  16. NSString * rate_data = self.dataArray[i][@"rrr"];
  17.  
  18. [x_array addObject:x_data];
  19. [y_array addObject:y_data];
  20. [rate_array addObject:rate_data];
  21. }
  22. // 矩形绘图区域
  23. CGRect Rectangle = rect;
  24. // 定义一个矩形路径
  25. UIBezierPath *path = [UIBezierPath bezierPathWithRect:Rectangle];
  26. // 将矩形路径画出来
  27. [path stroke];
  28.  
  29. /////////////////////////////////////////////////////////////////
  30. // 公共数据
  31. float fdistance_left_frame = 30.0; // 左側X轴距离边框的宽度。用于绘制文本
  32. float fdistance_bottom_frame = 15.0; // 左側Y轴距离边框的宽度
  33. float fdistance_right_frame = 10.0; // 左側X轴距离边框的宽度
  34. float fdraw_line_height = rect.size.height - fdistance_bottom_frame; // 绘制坐标的高度
  35. float fdraw_line_width = rect.size.width - fdistance_left_frame
  36. - fdistance_right_frame; // 绘制坐标的宽度
  37.  
  38. float f_x_axis_scale_number = 7.0; // X轴大刻度数
  39. float f_y_axis_scale_number = 7.0; // Y轴刻度数
  40. float x_unit_distance_scale = 0.0; // X轴刻度的偏移量
  41. float y_unit_distance_scale = 0.0; // Y轴刻度的偏移量
  42. float x_unit_scale = 0.0; // X轴刻度的跨度(一个比例单元)
  43. float y_unit_scale = 0.0; // Y轴刻度的跨度(一个比例单元)
  44.  
  45. // 開始画X轴
  46. float left_bottom_x = rect.origin.x + fdistance_left_frame;
  47. float left_bottom_y = rect.origin.y + fdraw_line_height;
  48. CGPoint point_origin = CGPointMake(left_bottom_x, left_bottom_y); // 坐标轴原点
  49.  
  50. // 定义一个開始路径
  51. UIBezierPath * x_startPath = [UIBezierPath bezierPath];
  52. [x_startPath setLineWidth:1.5];
  53.  
  54. [x_startPath moveToPoint:point_origin]; // 设置起点(坐标原点)
  55. for (int x = 0; x < f_x_axis_scale_number; x++) // 画直线
  56. {
  57. x_unit_scale = fdraw_line_height/f_x_axis_scale_number; // 一级等分大刻度
  58. x_unit_distance_scale = x * x_unit_scale; // 相对原点的偏移点
  59. [x_startPath addLineToPoint:CGPointMake(left_bottom_x, left_bottom_y - x_unit_distance_scale)];
  60.  
  61. // “|”X轴左側绘制文本
  62. float text_height_certer = left_bottom_y;
  63. float text_rect_top = text_height_certer - 8 - x_unit_distance_scale;
  64. float text_rect_bottom = text_height_certer + 8 - x_unit_distance_scale; // +8 -8 。给文字16个像素的高度
  65. float text_rect_height = 16;
  66. CGRect x_axis_rect = CGRectMake(2, text_rect_top, fdistance_left_frame, text_rect_height);
  67.  
  68. CGContextSetLineWidth(context, 1.0);
  69. CGContextSetRGBFillColor (context, 0.5, 0.5, 0.5, 0.5);
  70. UIFont *font = [UIFont boldSystemFontOfSize:12.0]; // 字体用12号
  71. NSString * x_strtext = [NSString stringWithFormat:@"%zi.00",x]; // 绘制X轴刻度值
  72. [x_strtext drawInRect:x_axis_rect withFont:font];
  73.  
  74. if (0 == x)
  75. {// 为“0”时。不或那个绘制刻度。直接在底部绘制横线“Y”轴
  76. float y_width = fdraw_line_width;
  77. CGContextSetRGBStrokeColor(context, 0.5, 0.5, 0.5, 0.5);//线条颜色
  78. CGContextMoveToPoint(context, left_bottom_x, left_bottom_y - x_unit_distance_scale);
  79. CGContextAddLineToPoint(context, left_bottom_x + y_width, left_bottom_y - x_unit_distance_scale);
  80. CGContextStrokePath(context);
  81.  
  82. // 開始画Y轴
  83. UIBezierPath * y_startPath = [UIBezierPath bezierPath];
  84. [y_startPath setLineWidth:1.5];
  85. [y_startPath moveToPoint:point_origin]; // Y轴的起始点也是X轴的刻度起始点
  86.  
  87. for (int y = 0; y < f_y_axis_scale_number + 1; y++) // 画直线
  88. {
  89. y_unit_scale = fdraw_line_width/f_y_axis_scale_number; // 一级等分大刻度
  90. y_unit_distance_scale = y * y_unit_scale; // 相对原点的偏移点
  91. [y_startPath addLineToPoint:CGPointMake(left_bottom_x, left_bottom_y - x_unit_distance_scale)];
  92.  
  93. // “—”Y轴下部绘制文本
  94. float y_text_left_certer = left_bottom_x;
  95. float y_text_rect_left = y_text_left_certer - 15 + y_unit_distance_scale;
  96. float y_text_rect_top = left_bottom_y + 2;
  97. float y_text_rect_width = y_text_left_certer + 15 + y_unit_distance_scale;
  98. // +10 -10 ,给文字20个像素的宽度
  99. float y_text_rect_height = 16;
  100.  
  101. CGRect y_axis_rect = CGRectMake(y_text_rect_left, y_text_rect_top, y_text_rect_width, y_text_rect_height);
  102.  
  103. CGContextSetLineWidth(context, 1.5); // 线宽度
  104. CGContextSetRGBFillColor (context, 0.5, 0.5, 0.5, 0.5);
  105. UIFont *font = [UIFont boldSystemFontOfSize:12.0]; // 字体用12号
  106. // NSString * y_strtext = [NSString stringWithFormat:@"%zi.00",y];// 绘制Y轴刻度值
  107.  
  108. NSString * y_strtext = [y_array objectAtIndex:f_y_axis_scale_number - y];
  109. y_strtext = [y_strtext substringFromIndex:5]; // 绘制Y轴刻度值
  110. [y_strtext drawInRect:y_axis_rect withFont:font];
  111.  
  112. if (y == 0){
  113.  
  114. } else {
  115. // “—”Y轴上部绘制刻度短线
  116. float fscale_width = 5.0;
  117. CGContextSetRGBStrokeColor(context, 0.5, 0.5, 0.5, 0.5); // 线条颜色
  118. CGContextMoveToPoint(context, left_bottom_x + y_unit_distance_scale, left_bottom_y );
  119. CGContextAddLineToPoint(context, left_bottom_x + y_unit_distance_scale, left_bottom_y - fscale_width);
  120. CGContextStrokePath(context);
  121. }
  122.  
  123. }
  124. [y_startPath stroke]; // Draws line 依据坐标点连线
  125.  
  126. } else
  127. {
  128. // "|"X轴绘制右側刻度短线
  129. float fscale_width = 5.0;
  130. CGContextSetRGBStrokeColor(context, 0.5, 0.5, 0.5, 0.5);// 线条颜色
  131. CGContextMoveToPoint(context, left_bottom_x, left_bottom_y - x_unit_distance_scale);
  132. CGContextAddLineToPoint(context, left_bottom_x + fscale_width, left_bottom_y - x_unit_distance_scale);
  133. CGContextStrokePath(context);
  134. }
  135. // // 绘制二级小刻度值
  136. // for (int xx = 0; xx < 5; xx++)
  137. // {
  138. // float fsmall_scale_width = 3.0;
  139. // CGContextSetRGBStrokeColor(context, 0.5, 0.5, 0.5, 0.5);// 线条颜色
  140. // CGContextSetLineWidth(context, 1.0); // 线宽度
  141. // float fsmall_scale_height = x_unit_distance_scale/10.0; // 每一小刻度 的高度不变
  142. // CGContextMoveToPoint(context, point_origin.x, point_origin.y - fsmall_scale_height);
  143. // CGContextAddLineToPoint(context, point_origin.x + fsmall_scale_width, point_origin.y - fsmall_scale_height);
  144. // CGContextStrokePath(context);
  145. // }
  146.  
  147. }
  148. [x_startPath stroke]; // Draws line 依据坐标点连线
  149.  
  150. [[UIColor blueColor] setFill];
  151. [x_startPath fill];
  152.  
  153. // "|"X轴绘制虚线。横向虚线
  154. CGFloat dashArray[] = {2.0, 2.0};
  155. CGContextSetLineDash(context, 0, dashArray, 2);
  156. CGContextSetRGBStrokeColor(context,0.5, 0.5, 0.5, 0.5);// 线条颜色
  157. for (int x = 1; x < f_x_axis_scale_number + 1; x++) // 画虚线
  158. {
  159. x_unit_distance_scale = x * (x_unit_scale); // 一级等分大刻度
  160. CGContextMoveToPoint(context, left_bottom_x + 5, left_bottom_y - x_unit_distance_scale);
  161. CGContextAddLineToPoint(context, left_bottom_x + fdraw_line_width, left_bottom_y - x_unit_distance_scale);
  162. }
  163. for (int y = 1; y < f_y_axis_scale_number + 1; y++) // 画虚线
  164. {
  165. y_unit_distance_scale = y * (y_unit_scale); // 一级等分大刻度
  166. CGContextMoveToPoint(context, point_origin.x + y_unit_distance_scale, point_origin.y - 5);
  167. CGContextAddLineToPoint(context, point_origin.x + y_unit_distance_scale, point_origin.y - fdraw_line_height + fdistance_bottom_frame + 3);
  168. }
  169. CGContextStrokePath(context);
  170.  
  171. // 開始绘制曲线图
  172. CGContextSetLineDash(context, 0.0,NULL, 0); // 还原画笔
  173. CGContextSetLineWidth(context,1.0); // 设置为实线画笔
  174. CGContextSetRGBStrokeColor(context, 1.0, 0, 0, 0.5); // 线条颜色
  175.  
  176. for (int a = 0; a < x_array.count; a++)
  177. {
  178. // Y轴日期倒着遍历,这里数据也倒着遍历
  179. float fdata = [[x_array objectAtIndex: x_array.count-1 - a] floatValue];
  180. CGPoint data_point = CGPointMake(point_origin.x + a * y_unit_scale, point_origin.y - fdata * x_unit_scale); // 坐标轴原点
  181.  
  182. if (0 == a)
  183. {
  184. CGContextMoveToPoint(context, data_point.x, data_point.y);
  185. }
  186. else
  187. {
  188. CGContextAddLineToPoint(context, data_point.x, data_point.y);
  189. }
  190. NSLog(@"%zi == (%f, %f)", a, data_point.x, data_point.y);
  191.  
  192. }
  193. CGContextStrokePath(context);
  194.  
  195. // 開始边框圆点
  196. CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);//画笔线的颜色
  197. CGContextSetLineWidth(context, 2.0);//线的宽度
  198. //void CGContextAddArc(CGContextRef c,CGFloat x, CGFloat y,CGFloat radius,CGFloat startAngle,CGFloat endAngle, int clockwise)1弧度=180°/π (≈57.3°) 度=弧度×180°/π 360°=360×π/180 =2π 弧度
  199. // x,y为圆点坐标,radius半径,startAngle为開始的弧度,endAngle为 结束的弧度,clockwise 0为顺时针,1为逆时针。
  200.  
  201. for (int a = 0; a < x_array.count; a++)
  202. {
  203. // Y轴日期倒着遍历,这里数据也倒着遍历
  204. float fdata = [[x_array objectAtIndex: x_array.count-1 - a] floatValue];
  205. CGPoint data_point = CGPointMake(point_origin.x + a * y_unit_scale, point_origin.y - fdata * x_unit_scale); // 坐标轴原点
  206.  
  207. CGContextAddArc(context, data_point.x, data_point.y, 1, 0, 2 * PI, 0); //加入一个圆
  208.  
  209. }
  210. CGContextDrawPath(context, kCGPathStroke); //绘制路径
  211. }
  212.  
  213. Bible 2015-07-15 17:24:10
  214.  
  215. // 文件头部加入 宏定义
  216. #define PI 3.1415926

源代码下载:http://download.csdn.net/detail/bible521125/8902893

c++ 转 ios 不久 用的有点乱,如须要能够自己整理。

ios 绘图,绘制坐标系,画坐标系的更多相关文章

  1. iOS开发必会的坐标系探究

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由落影发表于云+社区专栏 前言 app在渲染视图时,需要在坐标系中指定绘制区域. 这个概念看似乎简单,事实并非如此. When an a ...

  2. MFC图形绘制——绘制直尺和坐标系

    一.实验目的 1.掌握建立MFC应用程序的方法: 2.掌握映射模式. 二.实验内容 1.在MFC中绘制直尺,直尺需要有刻度,类似于日常学生使用的透明塑料直尺,需要建立四个直尺,分别分布在屏幕客户区的上 ...

  3. [转]iOS开发中的火星坐标系及各种坐标系转换算法

     iOS开发中的火星坐标系及各种坐标系转换算法 源:https://my.oschina.net/u/2607703/blog/619183   其原理是这样的:保密局开发了一个系统,能将实际的坐标转 ...

  4. iOS绘图教程 (转,拷贝以记录)

    本文是<Programming iOS5>中Drawing一章的翻译,考虑到主题完整性,在翻译过程中我加入了一些书中没有涉及到的内容.希望本文能够对你有所帮助. 转自:http://www ...

  5. iOS绘图教程

    本文是<Programming iOS5>中Drawing一章的翻译,考虑到主题完整性,翻译版本中加入了一些书中未涉及到的内容.希望本文能够对你有所帮助.(本文由海水的味道翻译整理,转载请 ...

  6. iOS绘图系统UIKit与Core Graphics

    概述 iOS主要的绘图系统有UIKit,Core Graphics,Core Animation,Core Image,Open GL等,本片博文主要介绍UIKit与Core Graphics的绘图系 ...

  7. 论文第4章:iOS绘图平台的实现

    面向移动设备的矢量绘图平台设计与实现 Design and Implementation of Mobile Device-oriented Vector Drawing Platform 引用本论文 ...

  8. iOS绘图框架CoreGraphics分析

    由于CoreGraphics框架有太多的API,对于初次接触或者对该框架不是十分了解的人,在绘图时,对API的选择会感到有些迷茫,甚至会觉得iOS的图形绘制有些繁琐.因此,本文主要介绍一下iOS的绘图 ...

  9. IOS绘图

    #import "ViewController.h" #import "DrawView.h" @interface ViewController () @pr ...

随机推荐

  1. asp.net core 与EFcore 入门

    什么是EFcore? Entity Framework (EF) Core 是轻量化.可扩展和跨平台版的常用 Entity Framework 数据访问技术,EF Core 可用作对象关系映射程序 ( ...

  2. C++ STL rope介绍----可持久化平衡树

    大致介绍: rope这个东西,我刚刚知道这玩意,用的不是很多,做个简单的介绍. 官方说明:我是刘邦(我估计你是看不懂的). rope就是一个用可持久化平衡树实现的“重型”string(然而它也可以保存 ...

  3. pandas 6 合并数据 concat, append 垂直合并,数据会变高/长

    from __future__ import print_function import pandas as pd import numpy as np concatenating # ignore ...

  4. [terry笔记]11gR2_DataGuard搭建_拷贝数据文件

    11gR2搭建dataguard环境: 自己做的实验,后续按照rman模式搭建.主备切换.模式调整等实验会陆续发上来. primary: OS:oel 6.4 database:11.2.0.4.0 ...

  5. TOMCATserver不写port号、不写项目名訪问项目、虚拟文件夹配置

    一.不写port. 这个问题都被问烂了.由于TOMCAT默认的訪问port为8080.而TCP/IP协议默认80port訪问,大家之所以看到别的站点都不写port号是由于人家用的的80port訪问的, ...

  6. swift入门-实现简单的登录界面

    // // AppDelegate.swift // UIWindow import UIKit @UIApplicationMain class AppDelegate: UIResponder, ...

  7. 安卓安装提示:Android SDK requires Android Developer Toolkit version 21.1.0 or above. (错误解决方法)

    安卓安装提示:Android SDK requires Android Developer Toolkit version 21.1.0 or above.  (错误解决方法) 主要是因为版本号不正确 ...

  8. Unity3D的场景单位 和 3D建模软件的单位 之间的关系

    转载自 : http://www.ceeger.com/Unity/Doc/2011/3D_to_Unity.html Date:2011-08-24 03:52 Unity的系统单位为米,其他3D软 ...

  9. sass07 函数

    scsss @function double($width){ //自定义函数u @return $width * 2; } @function double($width){ //自定义函数u @i ...

  10. angularjs 服务供应商

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...