ios 画图,绘制坐标系,画坐标系

先来看个效果:

新建视图类,在直接添加代码:

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // 获取当前环境
    CGContextRef context = UIGraphicsGetCurrentContext();

    // 保存当前环境,便于以后恢复
    CGContextSaveGState(context);

    // 把数据组织起来
    for (int i = 0; i < self.dataArray.count; i++)
    {
        NSString * x_data = self.dataArray[i][@"xxx"];
        NSString * y_data = self.dataArray[i][@"yyyy"];
        NSString * rate_data = self.dataArray[i][@"rrr"];

        [x_array addObject:x_data];
        [y_array addObject:y_data];
        [rate_array addObject:rate_data];
    }
    // 矩形画图区域
    CGRect Rectangle = rect;
    // 定义一个矩形路径
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:Rectangle];
    // 将矩形路径画出来
    [path stroke];

    /////////////////////////////////////////////////////////////////
    // 公共数据
    float fdistance_left_frame = 30.0;                    // 左侧X轴距离边框的宽度,用于绘制文本
    float fdistance_bottom_frame = 15.0;                  // 左侧Y轴距离边框的宽度
    float fdistance_right_frame = 10.0;                   // 左侧X轴距离边框的宽度
    float fdraw_line_height = rect.size.height - fdistance_bottom_frame;  // 绘制坐标的高度
    float fdraw_line_width = rect.size.width - fdistance_left_frame
                                - fdistance_right_frame;  // 绘制坐标的宽度

    float f_x_axis_scale_number = 7.0;                    // X轴大刻度数
    float f_y_axis_scale_number = 7.0;                    // Y轴刻度数
    float x_unit_distance_scale = 0.0;                    // X轴刻度的偏移量
    float y_unit_distance_scale = 0.0;                    // Y轴刻度的偏移量
    float x_unit_scale = 0.0;                             // X轴刻度的跨度(一个比例单元)
    float y_unit_scale = 0.0;                             // Y轴刻度的跨度(一个比例单元)

    // 开始画X轴
    float left_bottom_x = rect.origin.x + fdistance_left_frame;
    float left_bottom_y = rect.origin.y + fdraw_line_height;
    CGPoint point_origin = CGPointMake(left_bottom_x, left_bottom_y);              // 坐标轴原点

    // 定义一个开始路径
    UIBezierPath * x_startPath = [UIBezierPath bezierPath];
    [x_startPath  setLineWidth:1.5];

    [x_startPath moveToPoint:point_origin];                                        // 设置起点(坐标原点)
    for (int x = 0; x < f_x_axis_scale_number; x++)                                // 画直线
    {
        x_unit_scale = fdraw_line_height/f_x_axis_scale_number;                    // 一级等分大刻度
        x_unit_distance_scale = x * x_unit_scale;                                  // 相对原点的偏移点
        [x_startPath addLineToPoint:CGPointMake(left_bottom_x, left_bottom_y - x_unit_distance_scale)];

        // “|”X轴左侧绘制文本
        float text_height_certer = left_bottom_y;
        float text_rect_top = text_height_certer - 8 - x_unit_distance_scale;
        float text_rect_bottom = text_height_certer + 8 - x_unit_distance_scale;    // +8 -8 ,给文字16个像素的高度
        float text_rect_height = 16;
        CGRect x_axis_rect = CGRectMake(2, text_rect_top, fdistance_left_frame, text_rect_height);

        CGContextSetLineWidth(context, 1.0);
        CGContextSetRGBFillColor (context, 0.5, 0.5, 0.5, 0.5);
        UIFont  *font = [UIFont boldSystemFontOfSize:12.0];                         // 字体用12号
        NSString * x_strtext = [NSString stringWithFormat:@"%zi.00",x];             // 绘制X轴刻度值
        [x_strtext drawInRect:x_axis_rect withFont:font];

        if (0 == x)
        {// 为“0”时,不或那个绘制刻度,直接在底部绘制横线“Y”轴
            float y_width = fdraw_line_width;
            CGContextSetRGBStrokeColor(context, 0.5, 0.5, 0.5, 0.5);//线条颜色
            CGContextMoveToPoint(context, left_bottom_x, left_bottom_y - x_unit_distance_scale);
            CGContextAddLineToPoint(context, left_bottom_x + y_width, left_bottom_y - x_unit_distance_scale);
            CGContextStrokePath(context);

            // 开始画Y轴
            UIBezierPath * y_startPath = [UIBezierPath bezierPath];
            [y_startPath  setLineWidth:1.5];
            [y_startPath  moveToPoint:point_origin];                 // Y轴的起始点也是X轴的刻度起始点

            for (int y = 0; y < f_y_axis_scale_number + 1; y++)                          // 画直线
            {
                y_unit_scale = fdraw_line_width/f_y_axis_scale_number;               // 一级等分大刻度
                y_unit_distance_scale = y * y_unit_scale;                            // 相对原点的偏移点
                [y_startPath addLineToPoint:CGPointMake(left_bottom_x, left_bottom_y - x_unit_distance_scale)];

                // “—”Y轴下部绘制文本
                float y_text_left_certer = left_bottom_x;
                float y_text_rect_left = y_text_left_certer - 15 + y_unit_distance_scale;
                float y_text_rect_top = left_bottom_y + 2;
                float y_text_rect_width = y_text_left_certer + 15 + y_unit_distance_scale;
                // +10 -10 ,给文字20个像素的宽度
                float y_text_rect_height = 16;

                CGRect y_axis_rect = CGRectMake(y_text_rect_left, y_text_rect_top, y_text_rect_width, y_text_rect_height);

                CGContextSetLineWidth(context, 1.5);                             // 线宽度
                CGContextSetRGBFillColor (context, 0.5, 0.5, 0.5, 0.5);
                UIFont  *font = [UIFont boldSystemFontOfSize:12.0];              // 字体用12号
//                NSString * y_strtext = [NSString stringWithFormat:@"%zi.00",y];// 绘制Y轴刻度值

                NSString * y_strtext = [y_array objectAtIndex:f_y_axis_scale_number - y];
                y_strtext = [y_strtext substringFromIndex:5];                    // 绘制Y轴刻度值
                [y_strtext drawInRect:y_axis_rect withFont:font];

                if (y == 0){

                } else {
                    // “—”Y轴上部绘制刻度短线
                    float fscale_width = 5.0;
                    CGContextSetRGBStrokeColor(context, 0.5, 0.5, 0.5, 0.5);      // 线条颜色
                    CGContextMoveToPoint(context, left_bottom_x + y_unit_distance_scale, left_bottom_y );
                    CGContextAddLineToPoint(context, left_bottom_x + y_unit_distance_scale, left_bottom_y - fscale_width);
                    CGContextStrokePath(context);
                }

            }
            [y_startPath stroke];   // Draws line 根据坐标点连线

        } else
        {
            // "|"X轴绘制右侧刻度短线
            float fscale_width = 5.0;
            CGContextSetRGBStrokeColor(context, 0.5, 0.5, 0.5, 0.5);// 线条颜色
            CGContextMoveToPoint(context, left_bottom_x, left_bottom_y - x_unit_distance_scale);
            CGContextAddLineToPoint(context, left_bottom_x + fscale_width, left_bottom_y - x_unit_distance_scale);
            CGContextStrokePath(context);
        }
//        // 绘制二级小刻度值
//        for (int xx = 0; xx < 5; xx++)
//        {
//            float fsmall_scale_width = 3.0;
//            CGContextSetRGBStrokeColor(context, 0.5, 0.5, 0.5, 0.5);// 线条颜色
//            CGContextSetLineWidth(context, 1.0);                    // 线宽度
//            float fsmall_scale_height = x_unit_distance_scale/10.0; // 每一小刻度 的高度不变
//            CGContextMoveToPoint(context, point_origin.x, point_origin.y - fsmall_scale_height);
//            CGContextAddLineToPoint(context, point_origin.x + fsmall_scale_width, point_origin.y - fsmall_scale_height);
//            CGContextStrokePath(context);
//        }

    }
    [x_startPath stroke];   // Draws line 根据坐标点连线

    [[UIColor blueColor] setFill];
    [x_startPath fill];

    // "|"X轴绘制虚线,横向虚线
    CGFloat dashArray[] = {2.0, 2.0};
    CGContextSetLineDash(context, 0, dashArray, 2);
    CGContextSetRGBStrokeColor(context,0.5, 0.5, 0.5, 0.5);// 线条颜色
    for (int x = 1; x < f_x_axis_scale_number + 1; x++)    // 画虚线
    {
        x_unit_distance_scale = x * (x_unit_scale);        // 一级等分大刻度
        CGContextMoveToPoint(context, left_bottom_x + 5, left_bottom_y - x_unit_distance_scale);
        CGContextAddLineToPoint(context, left_bottom_x + fdraw_line_width, left_bottom_y - x_unit_distance_scale);
    }
    for (int y = 1; y < f_y_axis_scale_number + 1; y++)    // 画虚线
    {
        y_unit_distance_scale = y * (y_unit_scale);        // 一级等分大刻度
        CGContextMoveToPoint(context, point_origin.x + y_unit_distance_scale, point_origin.y - 5);
        CGContextAddLineToPoint(context, point_origin.x + y_unit_distance_scale, point_origin.y - fdraw_line_height + fdistance_bottom_frame + 3);
    }
    CGContextStrokePath(context);   

    // 开始绘制曲线图
    CGContextSetLineDash(context, 0.0,NULL, 0);            // 还原画笔
    CGContextSetLineWidth(context,1.0);                    // 设置为实线画笔
    CGContextSetRGBStrokeColor(context, 1.0, 0, 0, 0.5);   // 线条颜色

    for (int a = 0; a < x_array.count; a++)
    {
        // Y轴日期倒着遍历,这里数据也倒着遍历
        float fdata = [[x_array objectAtIndex: x_array.count-1 - a] floatValue];
        CGPoint data_point = CGPointMake(point_origin.x + a * y_unit_scale, point_origin.y - fdata * x_unit_scale);                                 // 坐标轴原点

        if (0 == a)
        {
            CGContextMoveToPoint(context, data_point.x, data_point.y);
        }
        else
        {
            CGContextAddLineToPoint(context, data_point.x, data_point.y);
        }
        NSLog(@"%zi == (%f, %f)", a, data_point.x, data_point.y);

    }
    CGContextStrokePath(context);

    // 开始边框圆点
    CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);//画笔线的颜色
    CGContextSetLineWidth(context, 2.0);//线的宽度
    //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π 弧度
    // x,y为圆点坐标,radius半径,startAngle为开始的弧度,endAngle为 结束的弧度,clockwise 0为顺时针,1为逆时针。

    for (int a = 0; a < x_array.count; a++)
    {
        // Y轴日期倒着遍历,这里数据也倒着遍历
        float fdata = [[x_array objectAtIndex: x_array.count-1 - a] floatValue];
        CGPoint data_point = CGPointMake(point_origin.x + a * y_unit_scale, point_origin.y - fdata * x_unit_scale);                                 // 坐标轴原点

        CGContextAddArc(context, data_point.x, data_point.y, 1, 0, 2 * PI, 0); //添加一个圆

    }
    CGContextDrawPath(context, kCGPathStroke); //绘制路径
}

Bible  2015-07-15 17:24:10  

// 文件头部添加  宏定义
#define  PI 3.1415926

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

c++ 转 ios 不久 用的有点乱,如需要可以自己整理。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-12-25 11:37:35

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

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

一.实验目的 1.掌握建立MFC应用程序的方法: 2.掌握映射模式. 二.实验内容 1.在MFC中绘制直尺,直尺需要有刻度,类似于日常学生使用的透明塑料直尺,需要建立四个直尺,分别分布在屏幕客户区的上.下.左.右四个边界.尺子需要有刻度,那客户区上端的尺子距离,应该有厘米.5毫米.1毫米刻度,刻度用竖线显示,长度分别为7毫米.6毫米.5毫米,外观类似于学生直尺,右端留出一公分,防止4个尺子碰在一起. 2.画出一坐标系,给出x坐标变化范围.y坐标变化范围,画出坐标轴,并在坐标轴上标出刻度.原点,要

D3js画坐标系,今天天气真好

画坐标系,先上图,再先上代码. <html> <meta charset="utf-8"> <body></body> <script src="https://d3js.org/d3.v4.min.js"></script> <script type="text/javascript" src="circle.js"></script&

为什么要用画图工具来画原型?

产品经理每天接触到的工具是在是太多了,平时要接触到的原型图也是各式各样的.不过熊先生最近发现很多同学在用画图工具来画原型,这样确实可以,但是,真的合适么? 首先我们来看现在比较常见的几种画图工具: 1. PS 2. Sketch 3. Fireworks 4. OmniGraffle 每个工具的使用都有其对应的场景,简单的说,就是这些工具的设计者和开发者希望他们的工具是做什么用的. PS:Image editing and compositing. (图像编辑和创作) Sketch:Profes

各地图坐标系转换(WGS84坐标系,GCJ02坐标系,BD09坐标系)

package position; import org.junit.Test; /** * 各地图API坐标系统比较与转换; * * WGS84坐标系:即地球坐标系,国际上通用的坐标系.设备一般包含GPS芯片或者北斗芯片获取的经纬度为WGS84地理坐标系,谷歌地图采用的是WGS84地理坐标系(中国范围除外); * * GCJ02坐标系:即火星坐标系,是由中国国家测绘局制订的地理信息系统的坐标系统.由WGS84坐标系经加密后的坐标系.谷歌中国地图和搜搜中国地图采用的是GCJ02地理坐标系; *

利用迅捷画图绘制精美流程图操作方法介绍

流程图在当下移动互联网的发展中占据举足轻重的地位,在工作学习中经常广泛使用,那为什么这么受欢迎呢?虽然不能一味的模仿,但是具体操作流程框架可以更直观的展示操作步骤,可以在基础操作中对内容进行扩展也可以达到意想不到的效果呢. 工具/原料: 能上网的电脑并带有浏览器 迅捷画图在线网站 推荐理由: 迅捷画图是集自己动手绘制与套用模板为一体的在线编辑流程图网站,并且里面可以添加链接,图片等元素.套用模板直接将其内容修改为自己需要的内容即可,使用都比较方便. 操作方法介绍:1.进入迅捷画图官网中,在列表页

怎样利用迅捷画图绘制精美思维导图,流程图

思维导图,流程图的用处是比较广泛的,大到企业,小到家庭很多人只知道有这样的软件但是却从来没有上手操作过,所以今天分享一个可以绘制思维导图以及流程图请添加链接描述的在线网站迅捷画图. 工具/原料: 电脑,浏览器,网络,迅捷画图 操作方法介绍: 绘制思维导图操作方法: 1.既然是利用迅捷画图在线网站进行绘制思维导图首先要做的就是打开网站,进入到操作界面中,选择页面中央位置的"进入迅捷画图",会跳转到新建文件页面中. 2.这里要绘制的是思维导图,点击新建文件之后会有四个选项可以选择,点击思维

如何利用迅捷画图绘制工作流程图

迅捷画图可以绘制流程图,思维导图并且能制作的很精美出来,那怎样利用迅捷画图绘制工作流程图呢?下面是小编辑总结的操作方法,可以参考步骤进行操作使用. 工具: 电脑,浏览器,迅捷画图 操作方法介绍: 1.利用软件绘制工作流程图,为了使制作的流程图更加精美更加快速可以对其进行大致的了解,在页面中点击"进入迅捷画图"按钮会进入新建页面. 2.在左上角的新建文件中选择新建流程图,选择错误是不能绘制的. 3.新建流程图完成之后就会进入流程图在线编辑页面中,在面板四周是工具栏,列表页以及命名文本名这

iOS上绘制自然的签名-b

这里有一篇很棒的文章写如何在Android上获取流畅的签名:Smoother Signatures:https://corner.squareup.com/2012/07/smoother-signatures.html,但是我没有找到一篇是写在iOS上如何实现.那么,究竟怎么做才能在iOS设备上获取用户的签名呢? 虽然我没有找到任何关于获取签名的文章,但是在App store上已经有了实现得很好的app.  Paper by 53:http://www.fiftythree.com/paper

iOS:quartz2D绘图(画一些简单的图形,如直线、三角形、圆、矩形、文字等)

前一篇几乎已经详细介绍了Quartz2D的所有知识,这一篇以及后面就不废话了,主要是用具体的实例来演示绘图效果. 这里我们先来绘制一些简单的图形(如直线.三角形.圆.矩形.文字.图像),它有两种方式可以绘制,一种是通过上下文绘制,另一种是通过路径绘制.下面对绘制三角形做了一个两种方式绘制的演示. 绘制基本的图形,需要在操作的视图类中重写- (void)drawRect:(CGRect)rect方法,并在在该方法中绘制图形.绘制图像既可以重写该方法绘制,也可以不用重写该方法,它有封装好的方法.这里