IOS开发之——绘图（CGContext）

胡家小闺女 發表於 2019-7-29 15:02:00

<div>
<div>
<pre class="hljs objectivec"><code class="objectivec">0 CGContextRef context = UIGraphicsGetCurrentContext(); 设置上下文

1 CGContextMoveToPoint 开始画线

2 CGContextAddLineToPoint 画直线

4 CGContextAddEllipseInRect 画一椭圆

4 CGContextSetLineCap 设置线条终点形状

4 CGContextSetLineDash 画虚线

4 CGContextAddRect 画一方框

4 CGContextStrokeRect 指定矩形

4 CGContextStrokeRectWithWidth 指定矩形线宽度

4 CGContextStrokeLineSegments 一些直线

5 CGContextAddArc 画一曲线前2点为中心中间俩店为起始弧度最后一数据为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 画曲线

13CGContextStrokePath 开始绘制图片

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，最后是奇数，那么要被填充，偶数则不填充，和方向没有关系。

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 混合俩种颜色
</code></pre>
以上引用
======================================================================
 
<div class="image-package">
<div class="image-container" style="max-width: 600px; max-height: 238px">
<div class="image-view" data-width="600" data-height="238"><img src="https://img2018.cnblogs.com/blog/556239/201907/556239-20190729145801625-925491018.jpg"></div>

</div>
<div class="image-caption">IOS直线样式</div>

</div>
======================================================================
<h4>虚线</h4>
画虚线需要用到函数：
<pre class="hljs objectivec"><code class="objectivec">CG_EXTERN void CGContextSetLineDash(CGContextRef __nullable c, CGFloat phase,
const CGFloat * __nullable lengths, size_t count)
CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);
</code></pre>
此函数需要四个参数： 
context – 这个不用多说 
phase - 稍后再说 
lengths – 指明虚线是如何交替绘制，具体看例子 
count – lengths数组的长度
<pre class="hljs objectivec"><code class="objectivec">CGContextRef context = UIGraphicsGetCurrentContext();
CGContextBeginPath(context);
CGContextSetLineWidth(context, 2.0);
CGContextSetStrokeColorWithColor(context, [UIColorwhiteColor].CGColor);
float lengths[] = {10,10};
CGContextSetLineDash(context, 0, lengths,2);
CGContextMoveToPoint(context, 10.0, 20.0);
CGContextAddLineToPoint(context, 310.0,20.0);
CGContextStrokePath(context);
CGContextClosePath(context);
</code></pre>
<ul>
<li>
lengths的值｛10,10｝表示先绘制10个点，再跳过10个点，如此反复，如图：
 
<div class="image-package">
<div class="image-container" style="max-width: 300px; max-height: 16px">
<div class="image-view" data-width="300" data-height="16"><img src="https://img2018.cnblogs.com/blog/556239/201907/556239-20190729145850345-1709498886.gif"></div>

</div>
<div class="image-caption">IOS开发笔记之绘图（CGContext小记）</div>

</div>

</li>
<li>
如果把lengths值改为｛10, 20, 10｝，则表示先绘制10个点，跳过20个点，绘制10个点，跳过10个点，再绘制20个点，如此反复，如图：

 
<div class="image-package">
<div class="image-container" style="max-width: 313px; max-height: 15px">
<div class="image-view" data-width="313" data-height="15"><img src="https://img2018.cnblogs.com/blog/556239/201907/556239-20190729145916993-1200560947.gif"></div>

</div>
<div class="image-caption">IOS开发笔记之绘图（CGContext小记）</div>

</div>

</li>
<li>
注意count的值等于lengths数组的长度

</li>
<li>
phase参数表示在第一个虚线绘制的时候跳过多少个点，举例说明：

</li>

</ul>
<pre class="hljs objectivec"><code class="objectivec">float lengths[] = {10,5};
CGContextSetLineDash(context, 0, lengths, 2);
CGContextMoveToPoint(context, 0.0, 20.0);
CGContextAddLineToPoint(context, 310.0, 20.0);
CGContextStrokePath(context);
========
CGContextSetLineDash(context, 5, lengths, 2);
CGContextMoveToPoint(context, 0.0, 40.0);
CGContextAddLineToPoint(context, 310.0, 40.0);
CGContextStrokePath(context);
========
CGContextSetLineDash(context, 8, lengths, 2);
CGContextMoveToPoint(context, 0.0, 60.0);
CGContextAddLineToPoint(context, 310.0, 60.);
CGContextStrokePath(context);
</code></pre>
如图显示：
<div class="image-package">
<div class="image-container" style="max-width: 284px; max-height: 81px">
<div class="image-view" data-width="284" data-height="81"><img src="https://img2018.cnblogs.com/blog/556239/201907/556239-20190729145935653-1159477716.gif"></div>
</div>
<div class="image-caption">IOS开发笔记之绘图（CGContext小记）</div>
</div>
 
由于lengths值为｛10，5｝，第一条线就是绘制10，跳过5，反复绘制。 
第二条线的phase值为5，则首先绘制【10减去5】，再跳过5，绘制10，反复绘制。 
第三条给也如此，先绘制2，再跳过5，如此反复。
================================================================ 
切线
<pre class="hljs objectivec"><code class="objectivec">- (void)drawRect:(CGRect)rect {
 CGContextRef context = UIGraphicsGetCurrentContext();
 CGContextSetLineWidth(context, 2.0);
 CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
 CGContextMoveToPoint(context, 100, 100);//起始点
 CGContextAddArcToPoint(context, 100,200, 300,200, 100);//点1，点2，半径
 CGContextStrokePath(context);
}
</code></pre>
<div class="image-package">
<div class="image-container" style="max-width: 321px; max-height: 479px">
<div class="image-view" data-width="321" data-height="479"><img src="https://img2018.cnblogs.com/blog/556239/201907/556239-20190729145954297-354698971.jpg"></div>
</div>
<div class="image-caption">IOS开发笔记之绘图（CGContext小记）</div>
</div>
================================================================ 
椭圆
<pre class="hljs objectivec"><code class="objectivec">- (void)drawRect:(CGRect)rect {
 CGContextRef context = UIGraphicsGetCurrentContext();
 CGContextSetLineWidth(context, 2.0);
 CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
 CGRect rectangle = CGRectMake(60,170,200,80);
 CGContextAddEllipseInRect(context, rectangle);
 CGContextStrokePath(context);
}
</code></pre>
<div class="image-package">
<div class="image-container" style="max-width: 321px; max-height: 480px">
<div class="image-view" data-width="321" data-height="480"><img src="https://img2018.cnblogs.com/blog/556239/201907/556239-20190729150021205-351461352.jpg"></div>
</div>
<div class="image-caption">IOS开发笔记之绘图（CGContext小记）</div>
</div>
================================================================ 
曲线
<pre class="hljs objectivec"><code class="objectivec">- (void)drawRect:(CGRect)rect {
 CGContextRef context = UIGraphicsGetCurrentContext();
 CGContextSetLineWidth(context, 2.0);
 CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
 CGContextMoveToPoint(context, 10, 10);//起始点
 CGContextAddCurveToPoint(context, 0, 50, 300, 250, 300, 400);//控制点1，控制点2，终点
 CGContextStrokePath(context);
}
</code></pre>
<div class="image-package">
<div class="image-container" style="max-width: 321px; max-height: 480px">
<div class="image-view" data-width="321" data-height="480"><img src="https://img2018.cnblogs.com/blog/556239/201907/556239-20190729150044231-383673530.jpg"></div>
</div>
<div class="image-caption">IOS开发笔记之绘图（CGContext小记）</div>
</div>
================================================================ 
曲线
<pre class="hljs objectivec"><code class="objectivec">- (void)drawRect:(CGRect)rect {
 CGContextRef context = UIGraphicsGetCurrentContext();
 CGContextSetLineWidth(context, 2.0);
 CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
 CGContextMoveToPoint(context, 10, 200);
 CGContextAddQuadCurveToPoint(context, 150, 10, 300, 200);//控制点1，终点
 CGContextStrokePath(context);
}
</code></pre>
<div class="image-package">
<div class="image-container" style="max-width: 322px; max-height: 482px">
<div class="image-view" data-width="322" data-height="482"><img src="https://img2018.cnblogs.com/blog/556239/201907/556239-20190729150111553-1187145894.jpg"></div>
</div>
<div class="image-caption">IOS开发笔记之绘图（CGContext小记）</div>
</div>
================================================================ 
虚线曲线
<pre class="hljs objectivec"><code class="objectivec">- (void)drawRect:(CGRect)rect {
 CGContextRef context = UIGraphicsGetCurrentContext();
 CGContextSetLineWidth(context, 5.0);
 CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
 CGFloat dashArray[] = {2,6,4,2};
 CGContextSetLineDash(context, 3, dashArray, 4);
 CGContextMoveToPoint(context, 10, 200);
 CGContextAddQuadCurveToPoint(context, 150, 10, 300, 200);//控制点1，终点
 CGContextStrokePath(context);
}
</code></pre>
<div class="image-package">
<div class="image-container" style="max-width: 321px; max-height: 481px">
<div class="image-view" data-width="321" data-height="481"><img src="https://img2018.cnblogs.com/blog/556239/201907/556239-20190729150132940-1397383075.jpg"></div>
</div>
<div class="image-caption">IOS开发笔记之绘图（CGContext小记）</div>
</div>
================================================================ 
以上引用 
更多详情 
更多详情

</div>

</div> 
来源：https://www.cnblogs.com/Free-Thinker/p/11263923.html

頁: [1]

琼殿技术论坛's Archiver

IOS开发之——绘图（CGContext）