Core Graphics框架

来源:http://www.cnblogs.com/chenjiangxiaoyu/archive/2017/08/31/7459934.html
-Advertisement-
Play Games

在iOS中常用的框架是Quartz 2D,它是Core Graphics框架的一部分，是一個強大的二維圖像繪製引擎。我們日常開發所用到的UIKit的組件都是由Core Graphics框架進行繪製的。當我們導入UIKit框架時，會自動導入Core Graphics框架。 在iOS中繪圖一般分為以下幾 ...


在iOS中常用的框架是Quartz 2D,它是Core Graphics框架的一部分，是一個強大的二維圖像繪製引擎。我們日常開發所用到的UIKit的組件都是由Core Graphics框架進行繪製的。當我們導入UIKit框架時，會自動導入Core Graphics框架。

在iOS中繪圖一般分為以下幾個步驟：

1.獲取繪圖上下文

2.創建並設置路徑

3.將路徑添加到上下文

4.設置上下文的狀態

5.繪製路徑

6.釋放路徑

圖形上下文中CGContextRef代表圖形輸出設備，也就是繪製的位置，包含繪製圖形的一些設備信息，Quartz 2D中的所有對象，都最終都必須要添加到圖形上下文，這樣一來，我們在繪製圖形的時候就不必關係具體的設備信息。

基本圖形繪製

在UIKit中，已經預設為我們準備好一個圖形上下文對象，在UIView的drawrect方法中，我們可以通過通過UIKit封裝函數UIGraphicsGetCurrentContext()方法獲取到圖形上下文(註：在其它方法中無法獲取)，然後只需要按照繪製圖形的步驟一步步執行即可，下麵重寫view的drawrect方法，在view上添加兩條線：

override func draw(_ rect: CGRect) {
        //  1.獲取圖形上下文對象
        let contextRef = UIGraphicsGetCurrentContext()
        
        //  2.創建路徑對象
        let path = CGMutablePath()
        path.move(to: CGPoint(x: 10, y: 10))
        path.addLine(to: CGPoint(x: 100, y: 100))
        
        //  這一段代碼是繪製曲線，lengths 表示的是 虛線的每段長度為5，每段間距為1，phase 如果填2，則表示虛線的第一個線段的長度為 5 - 2
        let a : CGFloat = 5
        let b : CGFloat = 1
        let lengths = [a,b]
        contextRef?.setLineDash(phase: 2, lengths: lengths)
    
        path.move(to: CGPoint(x: 5, y: 20))
        path.addLine(to: CGPoint(x: 100, y: 100))
        
        //  3.添加到圖像上下文
        contextRef?.addPath(path)
        
        //  4.設置圖形上下文狀態屬性
        contextRef?.setStrokeColor(UIColor.red.cgColor)     //  邊框顏色
        contextRef?.setFillColor(UIColor.blue.cgColor)      //  填充顏色，可以在封閉路徑中使用
        contextRef?.setLineWidth(2)                         //  線條寬度

        //  5.繪製
        contextRef?.strokePath()
    }

封閉圖形繪製

上面的繪圖方式顯得有些麻煩，其實Core Graphics內部對創建路徑對象添加到上下文這兩步操作進行了封裝，可以一步完成，下麵我們用線段繪製一個簡單的矩形：

//  1.獲取圖像上下文
        let contextRef = UIGraphicsGetCurrentContext()
        
        //  2.開始繪製一個正方形
        contextRef?.move(to: CGPoint(x: 10, y: 10))
        contextRef?.addLine(to: CGPoint(x: 110, y: 10))
        contextRef?.addLine(to: CGPoint(x: 110, y: 110))
        contextRef?.addLine(to: CGPoint(x: 10, y: 110))
        // 第四條線我們可以直接使用這個方法繪製
        contextRef?.closePath()
        
        //  3.設置相關狀態
        contextRef?.setLineWidth(2)
        contextRef?.setStrokeColor(UIColor.red.cgColor)
        contextRef?.setFillColor(UIColor.blue.cgColor)
        
        
        //  4.開始繪製 .既有邊框（路徑），又有填充
        contextRef?.drawPath(using: .fillStroke)

繪製一個矩形

上面的代碼已經相對來說簡化了不少，除了路徑之外，矩形，橢圓也都有相應的繪製方法。

// ----------- 使用addRect方法繪製 ------------
        
        //  1.獲取圖像上下文
        let contextRef = UIGraphicsGetCurrentContext()
        //  2.路徑
        contextRef?.addRect(CGRect(x: 10, y: 10, width: 100, height: 100))
        //  3.狀態
        contextRef?.setFillColor(UIColor.blue.cgColor)
        contextRef?.setStrokeColor(UIColor.red.cgColor)
        //  4.繪製
        contextRef?.drawPath(using: .fillStroke)

　　

// ----------- 使用UI方法繪製 ------------
        
        //  繪製一個填充色為紅色的矩形
        UIColor.red.setFill()
        UIRectFill(CGRect(x: 10, y: 10, width: 100, height: 100))
        
        //  繪製一個邊框為藍色的矩形
        UIColor.blue.setStroke()
        UIRectFrame(CGRect(x: 20, y: 20, width: 100, height: 100))

　繪製一個圓

//  1.獲取圖形上下文
        let contextRef = UIGraphicsGetCurrentContext()
        
        //  2.先規定一個矩形
        let rect = CGRect(x: 10, y: 10, width: 100, height: 100)
        
        //  3.添加內切圓
        contextRef?.addEllipse(in: rect)    //  內切圓
        
        //  4.設置填充色
        contextRef?.setFillColor(UIColor.red.cgColor)
        
        //  5.繪製
        contextRef?.drawPath(using: .fill)

　繪製一個弧形

//  1.獲取圖形上下文
        let contextRef = UIGraphicsGetCurrentContext()
        
        //  2.添加弧度
        let center = CGPoint(x: 100, y: 100)    //  圓心坐標
　　　　 contextRef.moveTo(center)　　　　　　　　　//　　加上這句代碼就可以繪製出一個扇形
        let radius : CGFloat = 50               //  半徑
        let startAngle : CGFloat = 0            //  開始弧度制
        let endAngle : CGFloat = CGFloat(Double.pi/4) //  結束弧度制
        let clockwise = true                    //  是否逆時針
        contextRef?.addArc(center: center, radius: CGFloat(radius), startAngle: startAngle, endAngle: endAngle, clockwise: clockwise)
        
        //  3.設置填充色
        contextRef?.setFillColor(UIColor.red.cgColor)
        
        //  4.繪製
        contextRef?.drawPath(using: .fill)

　　

 

漸變色填充

在上面的Demo中我們可以看到如何設置填充顏色，事實上很多時候純色的填充並不能滿足我們的足球，例如有的時候我們需要繪製一些圖形可能需要設置一個漂亮的背景，如果UI MM不給切圖的話，這個時候我們可能就會選擇漸變填充的方式。

Quartz 2D的漸變方式分為兩種：

a.線性漸變線：漸變色以直線方式從開始位置逐漸向結束位置漸變

b.徑向漸變：以中心點為圓心從起始漸變色向四周輻射，直到終止漸變色。

要做漸變則必須先設置從開始位置到結束位置的漸變顏色，UI MM可定對於漸變色設置並不陌生，只需要在指定位置指定不同的顏色，剩下的事情交給系統處理就行。如下圖，在起始位置，3/10位置，結束位置指定了三種顏色就形成了由三種顏色組成的漸變色。

另外，在iOS中繪製漸變還需要註意一點就是指定顏色空間，所謂顏色空間就是不同顏色在不同的維度上取值，最終組成一種顏色的過程。就拿RGB來說，如果將紅色，綠色，藍色看成是x、y、z軸坐標系，那麼在三個坐標上分別取0-255範圍內的不同值則可以組成各類顏色。當然，不同顏色空間的坐標系也是不同的，也就是說顏色表示的方式是不同的，常用的顏色空間除了RGB還有CMYK（印刷業常用這種顏色模式）、Gray.

在使用Quartz 2D繪圖時我們的顏色除了使用常規的方法（如CGContextSetRGBFillColor(CGContextRef context, CGFloat red, CGFloat green, CGFloat blue, CGFloat alpha)方法）設置RGB和透明度之外，有時還會遇到顏色參數是一個數組情況。如使用顏色空間填充時用到的CGContextSetFillColor(CGContextRef context, const CGFloat *components)方法，這個時候components數組中具體是如何存儲顏色就要根據顏色空間而定，如果顏色空間使用RGB，則數組中的元素四個為一組，分別是red、green、blue、alpha；如果使用的是CMYK顏色空間，那麼數組中的元素五個為一組，分別是cyan、magenta、yellow、black、alpha。

下麵，分別使用一下這兩種漸變的方式：

1.線性漸變

override func draw(_ rect: CGRect) {
        
        //  獲取上下文
        let contextRef = UIGraphicsGetCurrentContext()
        
        //  使用RGB顏色空間
        let colorSpace = CGColorSpaceCreateDeviceRGB()
        
        //  指定漸變色
        /*
         colorSpace : 顏色空間
         colorComponents : 顏色數組，由於指定了為RGB顏色空間，那麼四個數組元素就表示一個顏色（red\green\blue\alpha），如果有三個顏色，那麼這個數組中就要有 3 * 4 個元素。
         locations : 顏色所在的位置 0 - 1，這個數組的個數不小於顏色的個數
         count : 漸變的個數，等於locations的count
         */
        
        let colorComponents : [CGFloat] = [248.0/255.0,86.0/255.0,86.0/255.0,1,
                                           249.0/255.0,127.0/255.0,127.0/255.0,1,
                                           1.0,1.0,1.0,1.0]
        let locations : [CGFloat] = [0,0.3,1.0]
        
        let gradient = CGGradient(colorSpace: colorSpace, colorComponents: colorComponents, locations: locations, count: 3)
        
        //  繪製線性顏色漸變
        /*
        start : 起始坐標
        end : 結束坐標
         options ：繪製方式,kCGGradientDrawsBeforeStartLocation 開始位置之前就進行繪製，到結束位置之後不再繪製，
         kCGGradientDrawsAfterEndLocation開始位置之前不進行繪製，到結束點之後繼續填充
        */
        contextRef?.drawLinearGradient(gradient!, start: CGPoint(x : 0, y : 20), end: CGPoint(x : 0, y : self.frame.size.height - 40), options: .drawsBeforeStartLocation)

    }

2.徑向漸變

override func draw(_ rect: CGRect) {
        
        //  獲取上下文
        let contextRef = UIGraphicsGetCurrentContext()
        
        //  使用RGB顏色空間
        let colorSpace = CGColorSpaceCreateDeviceRGB()
        
        //  指定漸變色
        /*
         colorSpace : 顏色空間
         colorComponents : 顏色數組，由於指定了為RGB顏色空間，那麼四個數組元素就表示一個顏色（red\green\blue\alpha），如果有三個顏色，那麼這個數組中就要有 3 * 4 個元素。
         locations : 顏色所在的位置 0 - 1，這個數組的個數不小於顏色的個數
         count : 漸變的個數，等於locations的count
         */
        
        let colorComponents : [CGFloat] = [248.0/255.0,86.0/255.0,86.0/255.0,1,
                                           249.0/255.0,127.0/255.0,127.0/255.0,1,
                                           1.0,1.0,1.0,1.0]
        let locations : [CGFloat] = [0,0.3,1.0]
        
        let gradient = CGGradient(colorSpace: colorSpace, colorComponents: colorComponents, locations: locations, count: 3)
        
        /*繪製徑向漸變
         context:圖形上下文
         gradient:漸變色
         startCenter:起始點位置
         startRadius:起始半徑（通常為0，否則在此半徑範圍內容無任何填充）
         endCenter:終點位置（通常和起始點相同，否則會有偏移）
         endRadius:終點半徑（也就是漸變的擴散長度）
         options:繪製方式,kCGGradientDrawsBeforeStartLocation 開始位置之前就進行繪製，但是到結束位置之後不再繪製，
         kCGGradientDrawsAfterEndLocation開始位置之前不進行繪製，但到結束點之後繼續填充
         */
        let center = CGPoint(x: self.frame.size.width/2, y: self.frame.size.height/2)
        contextRef?.drawRadialGradient(gradient!, startCenter: center, startRadius: 0, endCenter: center, endRadius: 30, options: .drawsAfterEndLocation)

    }

　3.漸變填充

上面我們只是繪製漸變到圖形上下文，實際開發中有時候我們還需要填充對應的漸變色，例如現在繪製了一個矩形，如何填充成漸變色呢？在此可以利用漸變裁切來完成（當然利用層CALayer更加方便），特別說明一下區域裁切並不僅僅適用於漸變填充，對於其他圖形繪製仍然適用，並且註意裁切只能限於矩形裁切。

override func draw(_ rect: CGRect) {
        
        //  獲取上下文
        let contextRef = UIGraphicsGetCurrentContext()
        
        //  使用RGB顏色空間
        let colorSpace = CGColorSpaceCreateDeviceRGB()
        
        //裁切還可以使用UIKit中對應的方法
        UIRectClip(CGRect(x: 0, y: 20, width: self.frame.size.width, height: self.frame.size.height - 40))
        
        //  指定漸變色
        /*
         colorSpace : 顏色空間
         colorComponents : 顏色數組，由於指定了為RGB顏色空間，那麼四個數組元素就表示一個顏色（red\green\blue\alpha），如果有三個顏色，那麼這個數組中就要有 3 * 4 個元素。
         locations : 顏色所在的位置 0 - 1，這個數組的個數不小於顏色的個數
         count : 漸變的個數，等於locations的count
         */
        
        let colorComponents : [CGFloat] = [248.0/255.0,86.0/255.0,86.0/255.0,1,
                                           249.0/255.0,127.0/255.0,127.0/255.0,1,
                                           1.0,1.0,1.0,1.0]
        let locations : [CGFloat] = [0,0.3,1.0]
        
        let gradient = CGGradient(colorSpace: colorSpace, colorComponents: colorComponents, locations: locations, count: 3)
        
        //  繪製線性顏色漸變
        /*
        start : 起始坐標
        end : 結束坐標
         options ：繪製方式,kCGGradientDrawsBeforeStartLocation 開始位置之前就進行繪製，到結束位置之後不再繪製，
         kCGGradientDrawsAfterEndLocation開始位置之前不進行繪製，到結束點之後繼續填充
        */
        contextRef?.drawLinearGradient(gradient!, start: CGPoint(x : 0, y : 20), end: CGPoint(x : 0, y : self.frame.size.height - 40), options: .drawsBeforeStartLocation)


    }

　　

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 根據坐標點畫曲線
    核心代碼 控制點的簡單計算 將繪製的曲線添加到UIScrollView上 ...
  • 蘋果電腦獲取Android Studio的發佈版SHA1和開發版SHA1
    蘋果電腦獲取Android Studio的發佈版SHA1和開發版SHA1 ...
  • ionic 項目中ios上遇到的軟鍵盤輸入法自動彈出的問題
    一、 安裝插件 cordova plugin add ionic-plugin-keyboard 二、 軟鍵盤顯示監聽 window.addEventListener('native.keyboardshow', function (e) { // todo 進行鍵盤可用時操作 //e.keyboa ...
  • 解決Android彈出軟鍵盤導致的問題
    一、當Activity啟動後EditText直接獲取了焦點，此時軟鍵盤會自動彈出，這種體驗並不是很好，因此要做的Activity啟動不自動彈出軟鍵盤，只需要在Manifest中對應的Activity添加以下這句話就可以了： ...
  • Android簡單的編寫一個txt閱讀器（沒有處理字元編碼），適用於新手學習
    Android簡單的編寫一個txt閱讀器（沒有處理字元編碼），適用於新手學習 　　本程式只是使用了一些基本的知識點編寫了一個比較簡單粗陋的txt文本閱讀器，效率不高，只適合新手練習。所以大神勿噴。 　　其實想到編寫這種程式源自本人之前喜歡看小說，而很多小說更新太慢，所以本人就只能找一個完本的.tx... ...
  • iOS開發筆記17：自定義相機拍照
    之前用AVFoundation自定義相機做了拍照與視頻相關的東西，為什麼要自定義呢？主要是提供更個性化的交互設計，符合app主題，對於視頻來說，也便於提供更多豐富有趣的功能。前段時間整理了下拍照部分的功能，主要分為以下五個部分 1.初始化，建立會話，獲取攝像頭 使用AVCaptureSessionP ...
  • Android的HttpUrlConnection類的GET和POST請求
    最後 各位小伙伴們 又不懂或不清楚的可以給我留言 歡迎大家給我提出建議 或是指出問題 我們彼此都需要一個學習的過程 ...
  • NSMutableArray 增刪操作測試
    添加了 1 2 3 ( 1, 2, 3 ) 最前面插入了4 ( 4, 1, 2, 3 ) 刪除了1 ( 4, 2, 3 ) 刪除了0 （一個不存在的元素） ( 4, 2, 3 ) ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類