UIKit和Core Graphics绘图——绘制光泽，仿射变换与矩阵变换

绘制光泽

在一个矩形上绘制光泽其实可以通过在原有色彩的基础上绘制一层透明度较高的渐变来实现。首先先看以前绘制渐变的函数。

void drawLinearGradient(CGContextRef context, CGRect rect, CGColorRef startColor, CGColorRef endColor)
{
    CGContextSaveGState(context);
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    NSArray *array = @[(__bridge id)startColor, (__bridge id)endColor];
    
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)array, (CGFloat[]){0.0, 1.0});
    
    CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
    CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
    CGContextAddRect(context, rect);
    CGContextClip(context);
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
    
    CGColorSpaceRelease(colorSpace);
    CGGradientRelease(gradient);
    CGContextRestoreGState(context);
}

我们可以利用此函数同时绘制色彩渐变与增加光泽效果，函数如下：

void drawGlossAndLinearGradient(CGContextRef context, CGRect rect, CGColorRef startColor, CGColorRef endColor)
{
    drawLinearGradient(context, rect, startColor, endColor);
    
    UIColor *dark = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.1];
    UIColor *light = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.35];
    CGRect halfRect = CGRectMake(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height/2);  //光泽在上半部分
    
    drawLinearGradient(context, halfRect, light.CGColor, dark.CGColor);
}

在我们自定义UIView的drawRect中调用，同时加了阴影效果。

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGRect paintingRect = CGRectMake(5, 5, self.bounds.size.width - 10, self.bounds.size.height - 10);
    UIColor *lightBlue = [UIColor colorWithRed:105/255.0 green:179/255.0 blue:216/255.0 alpha:1.0];
    UIColor *darkBlue = [UIColor colorWithRed:21/255.0 green:92/255.0 blue:136/255.0 alpha:1.0];
    
    CGContextSaveGState(context);
    CGContextAddRect(context, paintingRect);
    CGContextSetFillColorWithColor(context, lightBlue.CGColor);
    CGContextSetShadowWithColor(context, CGSizeMake(0, 2), 3.0, [[UIColor colorWithRed:0.2 green:0.2 blue:0.2 alpha:1.0] CGColor]);
    CGContextFillPath(context);
    
    CGContextStrokePath(context);
    CGContextRestoreGState(context);
    
    drawGlossAndLinearGradient(context, paintingRect, lightBlue.CGColor, darkBlue.CGColor);

效果如下

看起来还算不错~

仿射变换

在路径中加入放射变化可以对绘制的图形发生一些变换效果，例如平移，缩放和旋转

函数分别为

CGAffineTransformMakeTranslation

CGAffineTransformMakeScale

CGAffineTransformMakeRotation

三者都返回一个类型为CGAffineTransform的对象，可以在设置路径的时候设置到参数中

举一个例子，画一个矩形 对它进行平移

- (void)rectTranslate
{
    CGMutablePathRef path = CGPathCreateMutable();
    CGAffineTransform transform = CGAffineTransformMakeTranslation(100, 10);
    
    CGPathAddRect(path, &transform, CGRectMake(10, 10, 200, 300));
    
    CGContextRef context  = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGContextAddPath(context, path);
    [[UIColor colorWithRed:.2f green:.6f blue:.8f alpha:1.0f] setFill];
    [[UIColor brownColor] setStroke];
    CGContextSetLineWidth(context, 5.0f);
    
    CGContextDrawPath(context, kCGPathFillStroke);
    
    CGContextRestoreGState(context);
    CGPathRelease(path);
}

这里平移的参数是x轴正向移动100，y轴正向移动10。然后将地址&transform传入到CGPathAddRect函数中。

矩阵变换

这里是指二维矩阵变换，对上下文以后绘制的所有内容进行转换。这里不同于Path只是给rect设置变换，矩阵变换是以后上下文绘制的内容全部发生变化。

在上下文中加入矩阵变换的函数为

CGContextTranslateCTM

CGContextScaleCTM

CGContextRotateCTM(传入的为弧度)

- (void)rectScale
{
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRect(path, NULL, CGRectMake(10, 10, 200, 300));
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGContextScaleCTM(context, .5f, .5f);   //需要在加路径之前使用，上下文设置的所有内容都进行缩放
    CGContextAddPath(context, path);
    CGContextSetLineWidth(context, 5.0f);
    [[UIColor colorWithRed:.2f green:.6f blue:.8f alpha:1.0f] setFill];
    [[UIColor brownColor] setStroke];
    
    CGContextDrawPath(context, kCGPathFillStroke);
    CGContextRestoreGState(context);
    CGPathRelease(path);
}

这个方法中，设置了一个缩放矩阵，之后绘制的矩形则变成了原来尺寸的一半。

以上为本篇文章全部内容，欢迎指正和交流。转载请注明出处~