曲线折线图 iOS ios绘制曲线图

转载

技术领航探索者 2023-11-15 15:40:43

文章标签 曲线折线图 iOS Line 调用函数画矩形 文章分类 iOS 移动开发

之前遇到一个公司让画价格曲线图，除了用OpenGL就是用Quartz2D，OpenGL还是倾向去底层的api这个比较低级。大家如果不是做游戏还是用一些封装比较好的东西。Quartz2D就可以满足你的要求，基本的曲线，各种图形的绘制，橡皮擦等等。Quartz2D还有一个corepolt的开源库应该是基于Quartz2D的。以下是官方网站的文档译文：

Paths中的几个重要元素Pointsvoid CGContextMoveToPoint ( CGContextRef c, CGFloat x, CGFloat y);指定一个点成为current pointQuartz会跟踪current point一般执行完一个相关函数后，current point都会相应的改变.Lines相关的几个函数void CGContextAddLineToPoint ( CGContextRef c, CGFloat x, CGFloat y);创建一条直线，从current point到 (x,y)然后current point会变成(x,y)void CGContextAddLines ( CGContextRef c, const CGPoint points[], size_t count);创建多条直线，比如points有两个点，那么会画两条直线从current point到 (x1,y1),然后是(x1,y1)到(x2,y2)

然后current point会变成points中的最后一个点

Arcs两种方法创建弧度第一种void CGContextAddArc ( CGContextRef c, CGFloat x, //圆心的x坐标 CGFloat y, //圆心的x坐标 CGFloat radius, //圆的半径 CGFloat startAngle, //开始弧度 CGFloat endAngle, //结束弧度 int clockwise //0表示顺时针，1表示逆时针);假如想创建一个完整的圆圈，那么开始弧度就是0 结束弧度是 2pi，因为圆周长是 2*pi*r.最后，函数执行完后，current point就被重置为(x,y).还有一点要注意的是，假如当前path已经存在一个subpath，那么这个函数执行的另外一个效果是会有一条直线，从current point到弧的起点第二种void CGContextAddArcToPoint ( CGContextRef c, CGFloat x1,//端点1的x坐标 CGFloat y1,//端点1的y坐标 CGFloat x2,//端点2的x坐标 CGFloat y2,//端点2的y坐标 CGFloat radius//半径);原理：首先画两条线，这两条线分别是 current point to (x1,y1) 和(x1,y1) to (x2,y2).这样就是出现一个以(x1,y1)为顶点的两条射线，然后定义半径长度，这个半径是垂直于两条射线的，这样就能决定一个圆了，更好的理解看下图，不过个人认为下图所标的 tangent point 1的位置是错误的。最后，函数执行完后，current point就被重置为(x2,y2).还有一点要注意的是，假如当前path已经存在一个subpath，那么这个函数执行的另外一个效果是

会有一条直线，从current point到(x1,y1)

Curves画曲线，一般是一条直线，然后定义几个控制点，使直线变弯曲。三次曲线函数void CGContextAddCurveToPoint ( CGContextRef c, CGFloat cp1x,//控制点1 x坐标 CGFloat cp1y,//控制点1 y坐标 CGFloat cp2x,//控制点2 x坐标 CGFloat cp2y,//控制点2 y坐标 CGFloat x,//直线的终点 x坐标 CGFloat y//直线的终点 y坐标);

假如第二个控制点（cp2x，cp2y）比（cp1x,cp1y）更接近current point，那么会形成一个封闭的曲线

二次曲线函数void CGContextAddQuadCurveToPoint ( CGContextRef c, CGFloat cpx,//控制点 x坐标 CGFloat cpy,//控制点 y坐标 CGFloat x,//直线的终点 x坐标 CGFloat y//直线的终点 y坐标);执行完函数貌似current point不会变化，没有具体测试过Ellipsesvoid CGContextAddEllipseInRect ( CGContextRef context, CGRect rect//一矩形);如果矩形是一个正方形，那么画出来就是一个圆执行完函数貌似current point不会变化，没有具体测试过Rectanglesvoid CGContextAddRect ( CGContextRef c, CGRect rect);一次性画出多个矩形void CGContextAddRects ( CGContextRef c, const CGRect rects[], size_t count);需要注意的是，画矩形有一些特别，current point没有发生变化
Creating a Path调用函数 CGContextBeginPath 开始创建路径，线调用函数CGContextMoveToPoint设置起点然后开始画自己想画的路径，注意一下几点:1.Lines, arcs, and curves,是从current point开始的2.假如想封闭一条路径，那么调用函数 CGContextClosePath 把当前点和起点连接起来3.当在画 arcs的时候，Quartz会画一条线从current point 到 starting point4.画矩形的时候不会有第三条那这样的的一条直线5.创建完路径后，必须调用 painting 函数 fill or stroke the path，不然不会画上面东东在相应的设备上】6.开始创建一个新的路径的时候，使用函数 CGContextBeginPath。重复利用路径的相关函数和数据类型CGPathCreateMutable 类似于 CGContextBeginPathCGPathMoveToPoint 类似于 CGContextMoveToPointCGPathAddLineToPoint 类似于 CGContextAddLineToPointCGPathAddCurveToPoint 类似于 CGContextAddCurveToPointCGPathAddEllipseInRect 类似于 CGContextAddEllipseInRectCGPathAddArc 类似于 CGContextAddArcCGPathAddRect 类似于 CGContextAddRectCGPathCloseSubpath 类似于 CGContextClosePathCGPathRefCGMutablePathRef用CGContextAddPath函数把一个路径添加到graphics context中void CGContextAddPath ( CGContextRef context, CGPathRef path);
Painting a PathStroking ：画出路径Filling ：填充路径的封闭区域影响Stroking的参数Line widthvoid CGContextSetLineWidth ( CGContextRef c, CGFloat width);Line join：线转弯的时候的样式，比如圆滑的方式void CGContextSetLineJoin ( CGContextRef c, CGLineJoin join);
Line cap：线的两端的样式，比如两端变的圆滑void CGContextSetLineCap ( CGContextRef c, CGLineCap cap);
Miter limit：当Line join的模式是Miter join的时候，这个参数会有影响void CGContextSetMiterLimit ( CGContextRef c, CGFloat limit);Line dash pattern：虚线相关void CGContextSetLineDash ( CGContextRef c, CGFloat phase, const CGFloat lengths[], size_t count);
Stroke color spacevoid CGContextSetStrokeColorSpace ( CGContextRef c, CGColorSpaceRef colorspace);Stroke colorvoid CGContextSetStrokeColor ( CGContextRef c, const CGFloat components[]);void CGContextSetStrokeColorWithColor ( CGContextRef c, CGColorRef color);Stroke pattern（和透明度相关）void CGContextSetStrokePattern ( CGContextRef c, CGPatternRef pattern, const CGFloat components[]);
Stroking的相关函数Strokes当前path.void CGContextStrokePath ( CGContextRef c);Strokes 指定的矩形.void CGContextStrokeRect ( CGContextRef c, CGRect rect);Strokes 指定的矩形, 使用指定的宽度.void CGContextStrokeRectWithWidth ( CGContextRef c, CGRect rect, CGFloat width);Strokes 指定的椭圆.void CGContextStrokeEllipseInRect ( CGContextRef context, CGRect rect);Strokes 一些直线.void CGContextStrokeLineSegments ( CGContextRef c, const CGPoint points[], size_t count);决定是Stroking 还是Fillingvoid CGContextDrawPath ( CGContextRef c, CGPathDrawingMode mode);