iOS开发画表格操作笔记

直接上流程代码：

一、表格

绘图环境（背景）也叫上下文

    CGContextRef context = UIGraphicsGetCurrentContext();

画线颜色和画线宽度

    CGContextSetStrokeColorWithColor(context, [UIColor grayColor].CGColor);
    CGContextSetLineWidth(context, 0.5);

在指定的点开始新的子路径

        CGContextMoveToPoint(context, x, y);

从当前点到给定点中间添加一条线段

        CGContextAddLineToPoint(context, x, y);

使用给定的绘图模式绘制当前路径

        CGContextDrawPath(context, kCGPathFillStroke);

两个for循环之后的效果：

grid.jpg

2、蜡烛

四个参数，最高价high,最低价low,开盘价open,关盘价close
先画最高价和最低价的连线

    CGContextSetStrokeColorWithColor(context, color.CGColor);
    CGContextSetLineWidth(context, candleLineWidth);
    CGContextMoveToPoint(context, centerX, high);
    CGContextAddLineToPoint(context, centerX, low);
    CGContextDrawPath(context, kCGPathFillStroke);

再画开盘价和关盘价中间的连线（线宽改为蜡烛所需要的宽度）

    CGContextSetStrokeColorWithColor(context, color.CGColor);
    CGContextSetLineWidth(context, candleWidth);
    CGContextMoveToPoint(context, centerX, open);
    CGContextAddLineToPoint(context, centerX, close);
    CGContextDrawPath(context, kCGPathFillStroke);

3.时分图

3.1三次贝塞尔曲线

优点在于比二次贝塞尔曲线更平滑一点，这里有点儿疑惑的地方，使用三次贝塞尔曲线控制点会造成趋势相反，这个反而在股票和一些交易平台给人造成误解
代码实现

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGFloat x1 = 200;
    CGFloat y1 = 170;
    CGFloat x2 = 330;
    CGFloat y2 = 100;
    CGContextSetLineWidth(context, 1);
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    CGContextMoveToPoint(context, x1, y1);
//使用提供的控制点和终点，从当前点附加一条三次贝塞尔曲线。
    CGContextAddCurveToPoint(context, (x1 + x2) / 2.0, y1,  (x1 + x2) / 2.0, y2, x2, y2);
    CGContextDrawPath(context, kCGPathFillStroke);

效果：

cubic.png

3.2 渐变色阴影的展示和裁剪

CGContextDrawLinearGradient方法按照路径裁剪并设置渐变色,该函数使用非零绕组编号规则计算当前路径与当前剪裁路径的交点。交点生成的路径将用作后续绘制操作的新当前剪裁路径。
如果当前路径包含任何打开的子路径，则通过调用CGContextClosePath将这些路径视为已关闭。与当前路径不同，当前剪裁路径是图形状态的一部分。因此，要通过将剪裁路径恢复到先前状态来重新放大可绘制区域，必须在剪裁之前保存图形状态，并在完成任何剪裁图形后恢复图形状态。

    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, &CGAffineTransformIdentity, x1, CGRectGetMaxY(self.frame));
    CGPathAddLineToPoint(path, &CGAffineTransformIdentity, x1, y1);
    CGPathAddCurveToPoint(path, &CGAffineTransformIdentity, (x1 + x2) / 2.0, y1, (x1 + x2) / 2.0, y2, x2, y2);
    CGPathAddLineToPoint(path,  &CGAffineTransformIdentity, x2, CGRectGetMaxY(self.frame));
    CGPathCloseSubpath(path);
    CGContextAddPath(context, path);

    CGContextClip(context);
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat locations[] = {0,1};
    NSArray *colors = @[(__bridge id)[UIColor rgb_r:0x4c g:0x86 b:0xCD alpha:1].CGColor, (__bridge id)[UIColor rgb_r:0x00 g:0x00 b:0x00 alpha:0].CGColor];
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (CFArrayRef) colors, locations);
    CGColorSpaceRelease(colorSpace);
    CGPoint start = CGPointMake((x1 + x2) / 2, CGRectGetMinY(self.frame));
    CGPoint end = CGPointMake((x1 + x2) / 2, CGRectGetMaxY(self.frame));
    CGContextDrawLinearGradient(context, gradient, start, end, 0);
    CGContextResetClip(context);
    CGColorSpaceRelease(colorSpace);
    CGPathRelease(path);
    CGGradientRelease(gradient);

效果：

gradient.png