CoreGraphics 2D绘图学习笔记

最新推荐文章于 2018-06-09 10:35:09 发布

Sodaslay

最新推荐文章于 2018-06-09 10:35:09 发布

阅读量1.2k

点赞数

分类专栏：图像处理 Cocoa框架文章标签： colors alignment blend uiview 图形 image

Cocoa框架同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

图像处理

47 篇文章 0 订阅

订阅专栏

画一个小原点的代码

----------------------

    UIGraphicsBeginImageContext(CGSizeMake(150, 150));//创建位图上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();//返回当前上下文
    CGContextBeginPath(ctx);//创建新路径
    CGContextAddArc(ctx, 10,10, 10, 0, 4*M_PI, 1);//使用狐制度创建狐
    CGContextSetRGBFillColor(ctx, 1, 0, 0, 1);//设置颜色
    CGContextFillPath(ctx);//自动关闭路径,并通过填充对路径进行喷漆.

    UIImage *redball = UIGraphicsGetImageFromCurrentImageContext();//返回一个位图上下文,仅仅用于位图
    UIGraphicsEndImageContext();//关闭位图上下文
    UIImageView *redballview = [[UIImageView alloc]initWithImage:redball];
    redballview.center = CGPointMake(200, 300);
    [self.view addSubview:redballview];

-----------------------------------------

CGContextAddArc是一个比较强大的函数CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, intclockwise)

CGContextRef: 图形上下文
x,y: 开始画的坐标
radius: 半径
startAngle, endAngle: 开始的弧度,结束的弧度
clockwise: 画的方向(顺时针,逆时针)

先要好好理解下上面那个函数,这个在上面的代码总来说是最难理解的,如果english nx可能就另当别论了.
无意中找到一个很叼的学习参考网站,放着记下
http://objective-j.org/learn/documentation/group__coregraphics.html#gac3f1c96dd9247e1ebc30d89b1b2acf13

在iPhone屏幕上画长方形，直线和文字

画扇形和画方形、画直线完全是两码事儿，

//画长方形
CGContextRef ctx = UIGraphicsGetCurrentContext();
//设置颜色，仅填充4条边
CGContextSetStrokeColorWithColor(ctx, [[UIColor colorWithRed:1 green:1 blue:1 alpha:0.5] CGColor]);
//设置线宽为1
CGContextSetLineWidth(ctx, 1.0);
//设置长方形4个顶点
CGPoint poins[] = {CGPointMake(5, 5),CGPointMake(425, 5),CGPointMake(425, 125),CGPointMake(5, 125)};
CGContextAddLines(ctx,poins,4);
CGContextClosePath(ctx);
CGContextStrokePath(ctx);

//画直线，x1和y1是起始点，x2和y2是结束点
//默认坐标系左上角为0，0
CGContextMoveToPoint(ctx, x1, y1);
CGContextAddLineToPoint(ctx, x2, y2);
CGContextClosePath(ctx);
CGContextStrokePath(ctx);

//画文字，设置文字内容
NSString *text = @"text";
//设置字体大小
UIFont *font = [UIFont systemFontOfSize:8];
//在指定x，y点位置画文字，宽度为18
[text drawAtPoint:CGPointMake(x, y) forWidth:18 withFont:font
minFontSize:8 actualFontSize:NULL
lineBreakMode:UILineBreakModeTailTruncation
baselineAdjustment:UIBaselineAdjustmentAlignBaselines];
[text release];

引入了Core Graphices框架功能，演示如何画线条，文本，改变线条的额粗细，颜色，以及保存和恢复图形上下文。

要在一个视图中进行自定义绘制，我们必须首先获得当前图形上下文。图形上下文(CGContext)是一个绘图画布，它存放绘图信息，如颜色，线条宽度和字体。在调用drawRect:之前，由UIView配置当前图形上下文。UIGraphicsGetCurrentContext函数返回已经为当前UIView所配置的图形上下文。

 
     1//获取当前图形上下文 
 
     2    CGContextRef context = UIGraphicsGetCurrentContext();
 
     3      
 
     4    //保存这个上下文，因为我们需要上下翻转它
 
     5    CGContextSaveGState(context);

 
     1/*通过调用CGContextRef中的CGContextTranslateCTM函数把坐标原点转换到左下角，该函数有两个参数，即水平和垂直方

 
     1向的变换数值。然后使用CGContextScaleCTM函数颠倒y轴，该函数有两个参数，即x轴和y轴的变换比例，第一个参数为1，保

`1`	`持x轴不变，而第二个参数为-1，表示颠倒y轴*/`

 
     01//向下移动该上下文坐标原点 
 
     02CGContextTranslateCTM(context, 0, self.view.bounds.size.height);
 
     03CGContextScaleCTM(context, 1.0, -1.0);     //向上翻转图像上下文
 
     04  
 
     05//以剩余时间来创建一个字符串 
 
     06NSString  *str = [NSString stringWithFormat:@"Time remaining:%i seconds", timeLeft];
 
     07  
 
     08//选择字体为16pt Helvetica 
 
     09CGContextSelectFont(context, "Helvetica", 16, kCGEncodingMacRoman);
 
     10CGContextSetTextDrawingMode(context, kCGTextFill);     //设置绘制模式
 
     11  
 
     12//设置文本颜色为黑色 
 
     13CGContextSetRGBFillColor(context, 0.0, 0.0, 0.0, 1.0);
 
     14  
 
     15//转换str为一个C 字符串并显示它 
 
     16CGContextShowTextAtPoint(context, 10.0, 10.0, [str cStringUsingEncoding:[NSString defaultCStringEncoding]], str.length);
 
     17CGContextRestoreGState(context);     //恢复上下文 
 
     18  
 
     19//如果炮弹在屏幕上 
 
     20if  (cannonballOnScreen)  
 
     21{ 
 
     22    //创建矩形并在其中绘制炮弹
 
     23    CGRect cannonballRect = CGRectMake(cannonball.x, cannonball.y, CANNON_BASE_RADIUS * 2, CANNON_BASE_RADIUS * 2);
 
     24    UIImage *image = [UIImage imageNamed:@"cannonball80.png"];
 
     25      
 
     26    //绘制图片到矩形中
 
     27    CGContextDrawImage(context, cannonballRect, image.CGImage);
 
     28} 
 
     29  
 
     30//绘制加农炮炮管 
 
     31//移动加农炮底座到视图中间的位置 
 
     32CGContextMoveToPoint(context, 0 , self.view.frame.size.height / 2);
 
     33  
 
     34//添加一根到加农炮炮管终端的线条 
 
     35CGContextAddLineToPoint(context, barrelEnd.x , barrelEnd.y);
 
     36CGContextSetLineWidth(context, 20);            //设置线条粗细
 
     37CGContextSetRGBStrokeColor(context, 0.0, 0.0, 0.0, 1.0);       //黑色
 
     38CGContextStrokePath(context);        //绘制线条 
 
     39  
 
     40//为加农炮底座创建矩形 
 
     41CGRect cannonBase = CGRectMake(0, self.view.frame.size.height / 2 - CANNON_BASE_RADIUS, CANNON_BASE_RADIUS, CANNON_BASE_RADIUS * 2);
 
     42  
 
     43//加载加农炮底座图片 
 
     44UIImage *baseImage = [UIImage imageNamed:@"cannon_base.png"];
 
     45  
 
     46//把加农炮底座图片绘制到矩形中 
 
     47CGContextDrawImage(context, cannonBase, baseImage.CGImage);
 
     48  
 
     49//在拦截器两个端点之间添加一根线 
 
     50CGContextMoveToPoint(context, blocker.start.x, blocker.start.y);
 
     51CGContextAddLineToPoint(context, blocker.end.x, blocker.end.y);
 
     52CGContextSetLineWidth(context, LINE_WIDTH);
 
     53  
 
     54CGContextStrokePath(context);        //绘制线条 
 
     55  
 
     56//计算目标每个分段的长度 
 
     57float  pieceLength = (TARGET_END - TARGET_BEGINING) / TARGET_PIECES; 
 
     58  
 
     59//移到目标起点 
 
     60CGContextMoveToPoint(context, target.start.x, target.start.y);
 
     61  
 
     62//绘制每个目标分段 
 
     63for  (int i = 1; i <= TARGET_PIECES; i++)
 
     64{ 
 
     65    //相邻分段以黄、蓝色区分开
 
     66    if(i % 2 == 0)
 
     67    {  
 
     68        CGContextSetRGBStrokeColor(context, 1, 1, 0, 1);
 
     69    }  
 
     70    else 
 
     71    {  
 
     72        CGContextSetRGBStrokeColor(context, 0, 0, 0.5, 1);
 
     73    }  
 
     74      
 
     75    //移到下一个分段的端点
 
     76    CGContextMoveToPoint(context, target.end.x, target.start.y + pieceLength * (i - 1));
 
     77      
 
     78    //如果这个分段还没有被击中
 
     79    if(!targetPieceHit[i - 1])
 
     80    {  
 
     81        //为该分段添加一条线
 
     82        CGContextAddLineToPoint(context, target.end.x, target.start.y + pieceLength * i);
 
     83        CGContextStrokePath(context);     //绘制分段
 
     84    }  
 
     85}

0 CGContextRef context = UIGraphicsGetCurrentContext(); 设置上下文

1 CGContextMoveToPoint 开始画线

2 CGContextAddLineToPoint 画直线

4 CGContextAddEllipseInRect 画一椭圆

4 CGContextSetLineCap 设置线条终点形状

4 CGContextSetLineDash 画虚线

4 CGContextAddRect 画一方框

4 CGContextStrokeRect 指定矩形

4 CGContextStrokeRectWithWidth 指定矩形线宽度

4 CGContextStrokeLineSegments 一些直线

5 CGContextAddArc 画已曲线前俩店为中心中间俩店为起始弧度最后一数据为0则顺时针画 1则逆时针

5 CGContextAddArcToPoint(context,0,0, 2, 9, 40);//先画俩条线从point 到弟1点，从弟1点到弟2点的线切割里面的圆

6 CGContextSetShadowWithColor 设置阴影

7 CGContextSetRGBFillColor 这只填充颜色

7 CGContextSetRGBStrokeColor 画笔颜色设置

7 CGContextSetFillColorSpace 颜色空间填充

7 CGConextSetStrokeColorSpace 颜色空间画笔设置

8 CGContextFillRect 补充当前填充颜色的rect

8 CGContextSetAlaha 透明度

9 CGContextTranslateCTM 改变画布位置

10 CGContextSetLineWidth 设置线的宽度

11 CGContextAddRects 画多个线

12 CGContextAddQuadCurveToPoint 画曲线

13 CGContextStrokePath 开始绘制图片

13 CGContextDrawPath 设置绘制模式

14 CGContextClosePath 封闭当前线路

15 CGContextTranslateCTM(context, 0, rect.size.height); CGContextScaleCTM(context, 1.0, -1.0);反转画布

16 CGContextSetInterpolationQuality 背景内置颜色质量等级

16 CGImageCreateWithImageInRect 从原图片中取小图

17 字符串的写入可用 nsstring本身的画图方法 - (CGSize)drawInRect:(CGRect)rect withFont:(UIFont *)font lineBreakMode:(UILineBreakMode)lineBreakMode alignment:(UITextAlignment)alignment;来写进去即可

18对图片放大缩小的功能就是慢了点

UIGraphicsBeginImageContext(newSize);

UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

19 CGColorGetComponents（）返回颜色的各个直以及透明度可用只读const float 来接收是个数组

20 画图片 CGImageRef image＝CGImageRetain(img.CGImage);

CGContextDrawImage(context, CGRectMake(10.0, height -

100.0, 90.0, 90.0), image);

21 实现逐变颜色填充方法 CGContextClip(context);

CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();

CGFloat colors[] =

{

204.0 / 255.0, 224.0 / 255.0, 244.0 / 255.0, 1.00,

29.0 / 255.0, 156.0 / 255.0, 215.0 / 255.0, 1.00,

0.0 / 255.0, 50.0 / 255.0, 126.0 / 255.0, 1.00,

};

CGGradientRef gradient = CGGradientCreateWithColorComponents

(rgb, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4));

CGColorSpaceRelease(rgb);

CGContextDrawLinearGradient(context, gradient,CGPointMake

(0.0,0.0) ,CGPointMake(0.0,self.frame.size.height),

kCGGradientDrawsBeforeStartLocation);

22 注: 画完图后,必须

先用CGContextStrokePath来描线,即形状

后用CGContextFillPath来填充形状内的颜色.

填充一个路径的时候，路径里面的子路径都是独立填充的。

假如是重叠的路径，决定一个点是否被填充，有两种规则

1,nonzero winding number rule:非零绕数规则，假如一个点被从左到右跨过，计数器+1，从右到左跨过，计数器-1，最后，如果结果是0，那么不填充，如果是非零，那么填充。

2,even-odd rule: 奇偶规则，假如一个点被跨过，那么+1，最后是奇数，那么要被填充，偶数则不填充，和方向没有关系。

Function

Description

CGContextEOFillPath

使用奇偶规则填充当前路径

CGContextFillPath

使用非零绕数规则填充当前路径

CGContextFillRect

填充指定的矩形

CGContextFillRects

填充指定的一些矩形

CGContextFillEllipseInRect

填充指定矩形中的椭圆

CGContextDrawPath

两个参数决定填充规则，kCGPathFill表示用非零绕数规则，kCGPathEOFill表示用奇偶规则，kCGPathFillStroke表示填充，kCGPathEOFillStroke表示描线，不是填充

设置当一个颜色覆盖上另外一个颜色，两个颜色怎么混合

默认方式是

result = (alpha * foreground) + (1 - alpha) * background

CGContextSetBlendMode :设置blend mode.

CGContextSaveGState :保存blend mode.

CGContextRestoreGState:在没有保存之前，用这个函数还原blend mode.

CGContextSetBlendMode 混合俩种颜色

Sodaslay

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CoreGraphics 2D绘图学习笔记

画一个小原点的代码---------------------- UIGraphicsBeginImageContext(CGSizeMake(150, 150));//创建位图上下文 CGContextRef ctx = UIGraphicsGetCurrentContext();//返回当前上下文 CGContextBeginPath(ctx);//创建新路径
复制链接

扫一扫