貝賽爾曲線,顏色漸變，矩陣變換

The UIBezierPath class lets you define a path consisting of straight and curved line segments and render that path in your custom views. You use this class initially to specify just the geometry for your path. Paths can define simple shapes such as rectangles, ovals, and arcs or they can define complex polygons that incorporate a mixture of straight and curved line segments. After defining the shape, you can use additional methods of this class to render the path in the current drawing context.UIBezierPath類允許您定義一個路徑組成的直線和曲線段和渲染路徑在您的自定義視圖。你使用這個類最初指定的幾何路徑。路徑可以定義簡單的形狀如矩形、橢圓、弧或他們可以定義復雜的多邊形,將直線和曲線段的混合物。定義形狀之后,您可以使用這個類的其他方法來呈現在當前繪圖上下文路徑

  • 使用貝賽爾曲線創建簡單圖形
- (void)drawRect:(CGRect)rect{
    //創建UIBezierPath
    UIBezierPath *path = [UIBezierPath bezierPath];
    //繪制三角形
    [path moveToPoint:CGPointMake(100, 10)];
    [path addLineToPoint:CGPointMake(130, 40)];
    [path addLineToPoint:CGPointMake(70, 40)];
    [[UIColor redColor] setFill];
    [path fill];//填充模式
    [path closePath];
    
    
    //繪制剪切區域
    [path moveToPoint:CGPointMake(100, 80)];
    [path addLineToPoint:CGPointMake(105, 100)];
    [path addLineToPoint:CGPointMake(95, 100)];
    [path closePath];
    [path appendPath:[UIBezierPath bezierPathWithRect:rect]];
    path.usesEvenOddFillRule = NO;
    [path addClip];
    
    
    
    //繪制軸
    [path removeAllPoints];//畫另一條線，不與之前的線連接
    [path moveToPoint:CGPointMake(100, 40)];
    [path addLineToPoint:CGPointMake(100, 100)];
    //設置周寬度
    [path setLineWidth:5];
    [path stroke];
}
三角形及箭頭
  • 繪制箭頭
- (void) drawRect:(CGRect)rect{
    //1.獲取圖形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2. 繪制大三角
    CGContextMoveToPoint(ctx, 100, 0);
    CGContextAddLineToPoint(ctx, 140, 40);
    CGContextAddLineToPoint(ctx, 60, 40);
    CGContextSetRGBFillColor(ctx, 1, 0, 0, 1.0);
    
    CGContextFillPath(ctx);
    //關閉路徑
    CGPDFContextClose(cox);


#pragma >>>>下方的剪切部分
    //3 小三角
    CGContextMoveToPoint(ctx, 100, 80);
    CGContextAddLineToPoint(ctx, 110, 100);
    CGContextAddLineToPoint(ctx, 90, 100);
    CGContextClosePath(ctx);
    //添加剪切區域
    CGContextAddRect(ctx, rect);
    //用奇偶規則剪切
    CGContextEOClip(ctx);
    //4 繪制軸
    CGContextMoveToPoint(ctx, 100, 40);
    CGContextAddLineToPoint(ctx, 100, 100);
    CGContextSetLineWidth(ctx, 20);
    CGContextStrokePath(ctx);
    }
  • 漸變色
- (void) drawRect:(CGRect)rect{
    //1.獲取圖形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2. 繪制大三角
    CGContextMoveToPoint(ctx, 100, 0);
    CGContextAddLineToPoint(ctx, 140, 40);
    CGContextAddLineToPoint(ctx, 60, 40);
    CGContextSetRGBFillColor(ctx, 1, 0, 0, 1.0);
    
    CGContextFillPath(ctx);
    //關閉路徑
    CGPDFContextClose(ctx);
    
    
#pragma >>>>下方的剪切部分
    //3 小三角
    CGContextMoveToPoint(ctx, 100, 80);
    CGContextAddLineToPoint(ctx, 110, 100);
    CGContextAddLineToPoint(ctx, 90, 100);
    CGContextClosePath(ctx);
    //添加剪切區域
    CGContextAddRect(ctx, rect);
    //用奇偶規則剪切
    CGContextEOClip(ctx);
    //4 繪制軸
    CGContextMoveToPoint(ctx, 100, 40);
    CGContextAddLineToPoint(ctx, 100, 100);
    CGContextSetLineWidth(ctx, 20);
   // CGContextStrokePath(ctx);//關閉，下方漸變才生效
    //確定漸變區域
    //stroke ->fill
    CGContextReplacePathWithStrokedPath(ctx);
    //保存設置狀態
    CGContextSaveGState(ctx);
    CGContextClip(ctx);
    
    //繪制漸變顏色
    CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
    const CGFloat components[] = {
        0.2,0.6,0.8,0.6,//開始的顏色
        0.5,0.9,0.3,0.8,//中間的顏色1
        0.7,0.5,0.2,0.7,//中間的顏色2
        0.4,0.7,0.7,0.4,//結束的顏色
    };
    //設置漸變區域
    const CGFloat locations[] = {0,0.32,0.56,1};
    /**
     space 顏色空間對象
     components 顏色的數組，存儲的事rgb顏色
     location  顏色所在位置
     count :顏色的個數 ＝ locations的個數
     */
    CGGradientRef gradientref = CGGradientCreateWithColorComponents(space, components, locations, 4);
    //繪制漸變
    //顏色0對應的開始點，顏色數組中的結束點位置
    CGContextDrawLinearGradient(ctx, gradientref,CGPointMake(90, 100),CGPointMake(110, 100),kCGGradientDrawsBeforeStartLocation);
    //釋放顏色空間，漸變的對象
    CGColorSpaceRelease(space);
    CGGradientRelease(gradientref);
    //恢復以前的區域
    CGContextRestoreGState(ctx);



![漸變色](http://upload-images.jianshu.io/upload_images/2382884-3f853c36bdc2f7c1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 矩陣變幻 CGContextTranslateCTM


//1.獲取圖形上下文 Translate平移  Rotate旋轉  cale縮放
CGContextRef ctx=UIGraphicsGetCurrentContext();

//5.矩陣變換,
//a.坐標軸的變換
CGRect bounds=self.bounds;
//平移坐標軸
CGContextTranslateCTM(ctx, 0, bounds.size.height);
//翻轉Y的坐標軸
CGContextScaleCTM(ctx, 1, -1);
//移動位置,沿著x軸移動100
CGContextTranslateCTM(ctx, 100, 0);
//旋轉
CGContextRotateCTM(ctx, radians(90));

//縮放
CGContextScaleCTM(ctx, 0.5, 0.5);

![翻轉，平移](http://upload-images.jianshu.io/upload_images/2382884-e1e55a6e96391a85.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

# 非零繞數
在圖形學中判斷一個點是否在多邊形內，若多邊形不是自相交的，那么可以簡單的判斷這個點在多邊形內部還是外部；若多邊形是自相交的，那么就需要根據非零環繞數規則和奇-偶規則判斷。

在圖形學中判斷一個點是否在多邊形內,若多邊形不是自相交的,那么可以簡單的判的,那么就需要根據非零環繞數規則和奇-偶規則判斷。判斷多邊形是否是自相交的:多邊形在平面內除頂點外還有其他公共點內-外測試
不自交的多邊形:多邊形僅在頂點處連接,而在平面內沒有其他公共點,此時可以自相交的多邊形:多邊形在平面內除頂點外還有其他公共點,此時劃分內-外部分(1)奇-偶規則(Odd-even Rule):奇數表示在多邊形內,偶數表示在多邊形外從任意位置p作一條射線,若與該射線相交的多邊形邊的數目為奇數,則p是多邊(2)非零環繞數規則(Nonzero Winding Number Rule):若環繞數為0表示在多首先使多邊形的邊變為矢量。將環繞數初始化為零。再從任意位置p作一條射線。
邊計數,每當多邊形的邊從右到左穿過射線時,環繞數加1,從左到右時,環繞數減1則p為內部點,否則,p是外部點。
參考[1]中例子如下,判斷點p是否在多邊形內,從點p向外做一條射線(可以任意方向),多邊形的邊從線時環數加1,最后環數不為0,即表示在多邊形內部。
當然,非零繞數規則和奇偶規則會判斷出現矛盾的情況,如下圖所示,左側表示用 奇充。右側圖用非零繞環規則判斷出繞數為2,非0表示在多邊形內部,所以填充。

斷
![屏幕快照 2016-09-16 下午2.24.03.png](http://upload-images.jianshu.io/upload_images/2382884-232fd9f074fe5937.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
需形
當 
左

斷這個點在多邊形內部還是外部;若多邊形是自相交
直接劃分內-外部分。要采用以下的方法。
內部點,否則是外部點。邊形內,非零表示在多邊形外
從p點沿射線方向移動時,對在每個方向上穿過射線的。處理完多邊形的所有相關邊之后,若環繞數為非零,
到右經過射線時環數減1,多邊形的邊從右往左經過射

偶規則判斷繞環數為2 ,表示在多邊形外,所以沒有填

以需
形多
當1
![屏幕快照 2016-09-16 下午2.24.13.png](http://upload-images.jianshu.io/upload_images/2382884-12e07f1b60e19011.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
左

奇
另外一個例子,如下
非零環繞數規則和奇-偶規則(Non-Zero Winding Number Rule&&Odd-even Ru1.CGContextClip 使用非零環繞數規則來判斷當前路徑和裁剪路徑的交集。2.CGContextEOClip 使用奇偶環繞數規則來判斷當前路徑和裁剪路徑的交集。
![
](http://upload-images.jianshu.io/upload_images/2382884-15c331d9d7fe106d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
u
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 最近項目中要實現加速球效果。是時候該學習一波了，好了廢話不多說，記筆記，還是從自己發憷的自定義view開始。 先來...
    laifrog閱讀 1,491評論 0贊 4
  • 一：canvas簡介 1.1什么是canvas？ ①：canvas是HTML5提供的一種新標簽 ②：HTML5 ...
    GreenHand1閱讀 4,718評論 2贊 32
  • 簡介 在繪圖中, 我們經常需要對路徑進行填充操作. 那么問題來了, 在一個路徑的覆蓋范圍內, 如何判斷哪些區域需要...
    李國安閱讀 4,638評論 8贊 15
  • 絕代有佳人，幽居在空谷。自云良家子，零落依草木。 合昏尚知時，鴛鴦不獨宿。但見新人笑，哪聞舊人哭。 ——杜甫《佳人...
    南宮即墨閱讀 6,671評論 80贊 128
  • 說在前頭：文章純屬原創，寫的科普文章不容易，各路朋友轉載還請注明出處。 ?買多大容量的紫砂壺比較合適呢？ 我們一般...
    KevinBC閱讀 530評論 0贊 0