Core Graphics 四: 色彩和纹理

2020-10-10  本文已影响0人  Trigger_o

Core Graphics 一: CGContext基本绘制
Core Graphics 二: CGAffineTransform变换和CTM坐标系
Core Graphics 三: CGPath

一.色彩和色彩空间

电磁波有不同的波长,一定范围内波长的电磁波会被人眼感受到,这部分就是可见光,光源或者物体反射可见光被人眼接受到,就会被大脑解析为对色彩的感知.但是一束电磁波里包含了各种波段,一束可见光也是,混合起来会产生多种多样的色彩.
什么是加减色.三个手电筒，每个手电筒上都装有一个彩色的透明滤波片，颜色分别是红、绿和蓝，然后将光投射到墙上，两个手电筒圈的交叠部分比任何一个单个圈都要亮，而三个圈中间的交叠部分更亮，每种混合，都会增加亮度，因此这种混合光我们称之为加色光.


加色

而减色指的是颜料等着色剂产生的混合效果,颜料在混合中，其波长的光线会被吸收而造成一定的颜色混合，从而出现其他颜色.

描述色彩的模型叫做色彩空间,如RGB,HSB,HSV,HLS等.

1.CGColor

RGB和sRGB两个方法生成的颜色不一样,同样是(.1, .5, .5, 1),上面是sRGB,下面是RGB


image.png

2.color space 色彩空间
在core Graphics中colorSpace主要有设备无关色彩空间,设备色彩空间和通用色彩空间,创建设备无关的色彩空间需要提供很多参数,涉及比较专业的内容,创建设备色彩空间和通用色彩空间基本不需要参数,直接create例如CGColorSpaceCreateDeviceCMYK; CGColorSpaceCreateDeviceGray; CGColorSpaceCreateDeviceRGB

二.渐变Gradient

首先创建一个渐变

    CGGradientRef myGradient;
    CGColorSpaceRef myColorspace;
    size_t num_locations = 2;
    CGFloat locations[2] = { 0.0, 1.0 };
    CGFloat components[8] = { 1.0, 0.5, 0.4, 1.0, 0.8, 0.8, 0.3, 1.0 };
    myColorspace = CGColorSpaceCreateWithName(kCGColorSpaceGenericRGB);
    myGradient = CGGradientCreateWithColorComponents (myColorspace, components, locations, num_locations);

     CGColorRef colors[] = {UIColor.whiteColor.CGColor,UIColor.blackColor.CGColor};
    CFArrayRef array = CFArrayCreate(kCFAllocatorDefault, (void *)colors, (CFIndex)2, NULL);
    CGGradientRef myGradient2 = CGGradientCreateWithColors(myColorspace, array, locations);

创建渐变之后,在上下文绘制

    CGPoint myStartPoint, myEndPoint;
    myStartPoint.x = 0;
    myStartPoint.y = 0;
    myEndPoint.x = rect.size.width;
    myEndPoint.y = 0;
    CGContextDrawLinearGradient (UIGraphicsGetCurrentContext(), myGradient2, myStartPoint, myEndPoint, 0);
image.png 
    CGPoint myStartPoint, myEndPoint;  
    myStartPoint.x = 0;
    myStartPoint.y = rect.size.height / 2;
    myEndPoint.x = rect.size.width;
    myEndPoint.y = rect.size.height / 2;
    CGContextDrawRadialGradient(UIGraphicsGetCurrentContext(), myGradient, myStartPoint, rect.size.height/2,     
 myEndPoint, rect.size.height/2, kCGGradientDrawsAfterEndLocation);
image.png

三.图案pattern

关于pattern官方文档说明的更清晰
pattern是一系列绘制操作，重复绘制到图形上下文。 您可以使用与使用颜色相同的方式使用模式。 当您使用pattern进行绘制时，Quartz将页面划分为一组pattern单元格，每个单元格都是图案pattern图像的大小，并使用您提供的回调绘制每个单元格.

简单的理解,pattern就像一块布上的花纹或者说图案,它是重复平铺的,单元格之间的距离可以设置.


image.png

图案(pattern)可以直接填充上下文,也可以生成color.
直接使用CGPatternCreate创建需要一大堆的参数,下面来解释一下使用方法

CGPatternRef CGPatternCreate (  void *info,
                                CGRect bounds,
                                CGAffineTransform matrix,
                                CGFloat xStep,
                                CGFloat yStep,
                                CGPatternTiling tiling,
                                bool isColored,
                                const CGPatternCallbacks *callbacks );



void customPattern (void *info, CGContextRef myContext)
{
    CGFloat subunit = 20;
 
    CGRect  myRect1 = {{0,0}, {subunit, subunit}},
            myRect2 = {{subunit, subunit}, {subunit, subunit}},
            myRect3 = {{0,subunit}, {subunit, subunit}},
            myRect4 = {{subunit,0}, {subunit, subunit}};
 
    CGContextSetRGBFillColor (myContext, 0, 0, 0, 1);
    CGContextFillRect (myContext, myRect1);
    CGContextSetRGBFillColor (myContext, 0, 0, 0, 1);
    CGContextFillRect (myContext, myRect2);
    CGContextSetRGBFillColor (myContext, 1, 1, 1, 1);
    CGContextFillRect (myContext, myRect3);
    CGContextSetRGBFillColor (myContext, 1, 1, 1, 1);
    CGContextFillRect (myContext, myRect4);
    
}

void painting (CGContextRef myContext,
                 CGRect rect)
{
    CGPatternRef    pattern;
    CGColorSpaceRef patternSpace;
    CGFloat         alpha = 1;
    static const    CGPatternCallbacks callbacks = {0,
                                        &customPattern,
                                        NULL};
 
    CGContextSaveGState (myContext);
    patternSpace = CGColorSpaceCreatePattern (NULL);
    CGContextSetFillColorSpace (myContext, patternSpace);
    CGColorSpaceRelease (patternSpace);
 
    pattern = CGPatternCreate (NULL,
                    CGRectMake (0, 0, 40, 40),
                    CGAffineTransformRotate(CGAffineTransformIdentity, M_PI_4),
                    50,
                    50,
                    kCGPatternTilingConstantSpacing,
                    true,
                    &callbacks);
 
    CGContextSetFillPattern (myContext, pattern, &alpha);
    CGPatternRelease (pattern);
    CGContextFillRect (myContext, rect);
    CGContextRestoreGState (myContext);
}

- (void)drawRect:(CGRect)rect{
    CGContextRef context = UIGraphicsGetCurrentContext();
    painting(context, rect);
}

1.void customPattern (void *info, CGContextRef myContext)是绘制单元格的回调函数
2.这里不需要info,所以传了NULL
3.用pattern来填充上下文,使用CGContextSetFillPattern或者CGContextSetStrokePattern


绘制出来的效果
上一篇 下一篇

猜你喜欢

热点阅读