CoreGraphic框架解析 （二十一） —— Curves and Layers（二）

版本记录

版本号	时间
V1.0	2019.03.09 星期六

前言

quartz是一个通用的术语，用于描述在iOS和MAC OS X 中整个媒体层用到的多种技术 包括图形、动画、音频、适配。Quart 2D 是一组二维绘图和渲染API，Core Graphic会使用到这组API，Quartz Core专指Core Animation用到的动画相关的库、API和类。CoreGraphics 是UIKit下的主要绘图系统，频繁的用于绘制自定义视图。Core Graphics是高度集成于UIView和其他UIKit部分的。Core Graphics数据结构和函数可以通过前缀CG来识别。在app中很多时候绘图等操作我们要利用CoreGraphic框架，它能绘制字符串、图形、渐变色等等，是一个很强大的工具。感兴趣的可以看我另外几篇。
1. CoreGraphic框架解析（一）—— 基本概览
2. CoreGraphic框架解析（二）—— 基本使用
3. CoreGraphic框架解析（三）—— 类波浪线的实现
4. CoreGraphic框架解析（四）—— 基本架构补充
5. CoreGraphic框架解析 （五）—— 基于CoreGraphic的一个简单绘制示例 （一）
6. CoreGraphic框架解析 （六）—— 基于CoreGraphic的一个简单绘制示例 （二）
7. CoreGraphic框架解析 （七）—— 基于CoreGraphic的一个简单绘制示例 （三）
8. CoreGraphic框架解析 （八）—— 基于CoreGraphic的一个简单绘制示例 （四）
9. CoreGraphic框架解析 （九）—— 一个简单小游戏 （一）
10. CoreGraphic框架解析 （十）—— 一个简单小游戏 （二）
11. CoreGraphic框架解析 （十一）—— 一个简单小游戏 （三）
12. CoreGraphic框架解析 （十二）—— Shadows 和 Gloss （一）
13. CoreGraphic框架解析 （十三）—— Shadows 和 Gloss （二）
14. CoreGraphic框架解析 （十四）—— Arcs 和 Paths （一）
15. CoreGraphic框架解析 （十五）—— Arcs 和 Paths （二）
16. CoreGraphic框架解析 （十六）—— Lines, Rectangles 和 Gradients （一）
17. CoreGraphic框架解析 （十七）—— Lines, Rectangles 和 Gradients （二）
18. CoreGraphic框架解析 （十八） —— 如何制作Glossy效果的按钮（一）
19. CoreGraphic框架解析 （十九） —— 如何制作Glossy效果的按钮（二）
20. CoreGraphic框架解析 （二十） —— Curves and Layers（一）

源码

1. Swift

首先看下代码组织结构

下面就是源码了

1. AppDelegate.swift

import UIKit
import TwitterKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    TWTRTwitter.sharedInstance().start(withConsumerKey:"HO7JmJZdqvElOo3ERJR4FQ", consumerSecret:"hheWs2LgY9hJGecKxX074tUJ9hOUkyonm3UKbcXRjE4")
    return true
  }

  func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    return TWTRTwitter.sharedInstance().application(app, open: url, options: options)
  }
}

2. ContainerScrollView.swift

import UIKit

class ContainerScrollView: UIScrollView {
  var scrollView: UIScrollView?

  func setScrollView(_ scrollView: UIScrollView) {
    self.scrollView = scrollView
    addSubview(scrollView)
  }
}

3. RageLevel.swift

import UIKit

enum RageLevel: Int, CaseIterable {
  case happy, somewhatHappy, neutral, somewhatAngry, angry

  var image: UIImage {
    switch self {
    case .happy: return UIImage(named: "happy")!
    case .somewhatHappy: return UIImage(named: "somewhat_happy")!
    case .neutral: return UIImage(named: "neutral")!
    case .somewhatAngry: return UIImage(named: "somewhat_angry")!
    case .angry: return UIImage(named: "angry")!
    }
  }

  var tweet: String {
    switch self {
    case .happy: return "The world is my oyster - raw, wriggling, and danglng from my mouth."
    case .somewhatHappy: return "Get down with your bad self!"
    case .neutral: return "Hmm ... Not good, not bad.  Not happy.  Not sad."
    case .somewhatAngry: return "Core breach imminent - stand back before I go thermonuclear"
    case .angry: return "FFFFFFFUUUUUUUUU!!!!1!!!"
    }
  }
}

4. SkyView.swift

import UIKit

class SkyView: UIView {
  private var rageLevel: RageLevel = .happy

  func setRageLevel(_ rageLevel: RageLevel) {
    self.rageLevel = rageLevel
    setNeedsDisplay()
  }

  private func degreesToRadians(_ degrees: CGFloat) -> CGFloat {
    return CGFloat.pi * degrees/180.0
  }

  override func draw(_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext() else {
      return
    }

    let colorSpace = CGColorSpaceCreateDeviceRGB()

    drawSky(in: rect, rageLevel: rageLevel, context: context, colorSpace: colorSpace)
    drawMountains(in: rect, in: context, with: colorSpace)
    drawGrass(in: rect, in: context, with: colorSpace)
    drawFlowers(in: rect, in: context, with: colorSpace)
  }

  private func drawSky(in rect: CGRect, rageLevel: RageLevel, context: CGContext, colorSpace: CGColorSpace) {
    let baseColor: UIColor
    let middleStop: UIColor
    let farStop: UIColor

    switch rageLevel {
    case .happy:
      baseColor = UIColor(red: 0 / 255.0, green: 158.0 / 255.0, blue: 183.0 / 255.0, alpha: 1.0)
      middleStop = UIColor(red: 0.0 / 255.0, green: 255.0 / 255.0, blue: 252.0 / 255.0, alpha: 1.0)
      farStop = UIColor(red: 255.0 / 255.0, green: 255.0 / 255.0, blue: 255.0 / 255.0, alpha: 1.0)
    case .somewhatHappy:
      baseColor = UIColor(red: 0 / 255.0, green: 158.0 / 255.0, blue: 183.0 / 255.0, alpha: 1.0)
      middleStop = UIColor(red: 144.0 / 255.0, green: 152.0 / 255.0, blue: 253.0 / 255.0, alpha: 1.0)
      farStop = UIColor(red: 96.0 / 255.0, green: 111.0 / 255.0, blue: 144.0 / 255.0, alpha: 1.0)
    case .neutral:
      baseColor = UIColor(red: 148.0 / 255.0, green: 158.0 / 255.0, blue: 183.0 / 255.0, alpha: 1.0)
      middleStop = UIColor(red: 127.0 / 255.0, green: 138.0 / 255.0, blue: 166.0 / 255.0, alpha: 1.0)
      farStop = UIColor(red: 96.0 / 255.0, green: 111.0 / 255.0, blue: 144.0 / 255.0, alpha: 1.0)
    case .somewhatAngry:
      baseColor = UIColor(red: 255.0 / 255.0, green: 147.0 / 255.0, blue: 167.0 / 255.0, alpha: 1.0)
      middleStop = UIColor(red: 127.0 / 255.0, green: 138.0 / 255.0, blue: 166.0 / 255.0, alpha: 1.0)
      farStop = UIColor(red: 107.0 / 255.0, green: 107.0 / 255.0, blue: 107.0 / 255.0, alpha: 1.0)
    case .angry:
      baseColor = UIColor(red: 255.0 / 255.0, green: 0 / 255.0, blue: 0 / 255.0, alpha: 1.0)
      middleStop = UIColor(red: 140.0 / 255.0, green: 33.0 / 255.0, blue: 33.0 / 255.0, alpha: 1.0)
      farStop = UIColor(red: 0 / 255.0, green: 0 / 255.0, blue: 0 / 255.0, alpha: 1.0)
    }

    context.saveGState()
    defer { context.restoreGState() }

    let gradientColors = [baseColor.cgColor, middleStop.cgColor, farStop.cgColor]
    let locations: [CGFloat] = [0.0, 0.1, 0.25]

    let startPoint = CGPoint(x: rect.size.height/2, y: 0)
    let endPoint = CGPoint(x: rect.size.height/2, y: rect.size.width)

    if let gradient = CGGradient.init(colorsSpace: colorSpace, colors: gradientColors as CFArray, locations: locations) {
      context.drawLinearGradient(gradient, start: startPoint, end: endPoint, options: [])
    }
  }

  private func drawMountains(in rect: CGRect, in context: CGContext, with colorSpace: CGColorSpace?) {
    let darkColor = UIColor(red: 1.0 / 255.0, green: 93.0 / 255.0, blue: 67.0 / 255.0, alpha: 1)
    let lightColor = UIColor(red: 63.0 / 255.0, green: 109.0 / 255.0, blue: 79.0 / 255.0, alpha: 1)
    let rectWidth = rect.size.width

    let mountainColors = [darkColor.cgColor, lightColor.cgColor]
    let mountainLocations: [CGFloat] = [0.1, 0.2]
    guard let mountainGrad = CGGradient.init(colorsSpace: colorSpace, colors: mountainColors as CFArray, locations: mountainLocations) else {
      return
    }

    let mountainStart = CGPoint(x: rect.size.height / 2, y: 100)
    let mountainEnd = CGPoint(x: rect.size.height / 2, y: rect.size.width)

    context.saveGState()
    defer { context.restoreGState() }

    let backgroundMountains = CGMutablePath()
    backgroundMountains.move(to: CGPoint(x: -5, y: 157), transform: .identity)
    backgroundMountains.addQuadCurve(to: CGPoint(x: 77, y: 157), control: CGPoint(x: 30, y: 129), transform: .identity)
    backgroundMountains.addCurve(to: CGPoint(x: 303, y: 125), control1: CGPoint(x: 190, y: 210), control2: CGPoint(x: 200, y: 70), transform: .identity)
    backgroundMountains.addQuadCurve(to: CGPoint(x: 350, y: 150), control: CGPoint(x: 340, y: 150), transform: .identity)
    backgroundMountains.addQuadCurve(to: CGPoint(x: 410, y: 145), control: CGPoint(x: 380, y: 155), transform: .identity)
    backgroundMountains.addCurve(to: CGPoint(x: rectWidth, y: 165), control1: CGPoint(x: rectWidth - 90, y: 100), control2: CGPoint(x: rectWidth - 50, y: 190), transform: .identity)
    backgroundMountains.addLine(to: CGPoint(x: rectWidth - 10, y: rect.size.width), transform: .identity)
    backgroundMountains.addLine(to: CGPoint(x: -5, y: rect.size.width), transform: .identity)
    backgroundMountains.closeSubpath()

    // Background Mountain Drawing
    context.addPath(backgroundMountains)

    context.clip()
    context.drawLinearGradient(mountainGrad, start: mountainStart, end: mountainEnd, options: [])
    context.setLineWidth(4)

    // Background Mountain Stroking
    context.addPath(backgroundMountains)
    context.setStrokeColor(UIColor.black.cgColor)
    context.strokePath()

    // Foreground Mountains
    let foregroundMountains = CGMutablePath()
    foregroundMountains.move(to: CGPoint(x: -5, y: 190), transform: .identity)
    foregroundMountains.addCurve(to: CGPoint(x: 303, y: 190), control1: CGPoint(x: 160, y: 250), control2: CGPoint(x: 200, y: 140), transform: .identity)
    foregroundMountains.addCurve(to: CGPoint(x: rectWidth, y: 210), control1: CGPoint(x: rectWidth - 150, y: 250), control2: CGPoint(x: rectWidth - 50, y: 170), transform: .identity)
    foregroundMountains.addLine(to: CGPoint(x: rectWidth, y: 230), transform: .identity)
    foregroundMountains.addCurve(to: CGPoint(x: -5, y: 225), control1: CGPoint(x: 300, y: 260), control2: CGPoint(x: 140, y: 215), transform: .identity)
    foregroundMountains.closeSubpath()

    // Foreground Mountain drawing
    context.addPath(foregroundMountains)
    context.clip()
    context.setFillColor(darkColor.cgColor)
    context.fill(CGRect(x: 0, y: 170, width: rectWidth, height: 90))

    // Foreground Mountain stroking
    context.addPath(foregroundMountains)
    context.setStrokeColor(UIColor.black.cgColor)
    context.strokePath()
  }

  private func drawGrass(in rect: CGRect, in context: CGContext, with colorSpace: CGColorSpace?) {
    context.saveGState()
    defer { context.restoreGState() }

    let grassStart = CGPoint(x: rect.size.height / 2, y: 100)
    let grassEnd = CGPoint(x: rect.size.height / 2, y: rect.size.width)
    let rectWidth = rect.size.width

    let grass = CGMutablePath()
    grass.move(to: CGPoint(x: rectWidth, y: 230), transform: .identity)
    grass.addCurve(to: CGPoint(x: 0, y: 225), control1: CGPoint(x: 300, y: 260), control2: CGPoint(x: 140, y: 215), transform: .identity)
    grass.addLine(to: CGPoint(x: 0, y: rect.size.width), transform: .identity)
    grass.addLine(to: CGPoint(x: rectWidth, y: rect.size.width), transform: .identity)

    context.addPath(grass)
    context.clip()

    let lightGreen = UIColor(red: 39.0 / 255.0, green: 171.0 / 255.0, blue: 95.0 / 255.0, alpha: 1)
    let darkGreen = UIColor(red: 0.0 / 255.0, green: 134.0 / 255.0, blue: 61.0 / 255.0, alpha: 1)

    let grassColors = [lightGreen.cgColor, darkGreen.cgColor]
    let grassLocations: [CGFloat] = [0.3, 0.4]
    if let grassGrad = CGGradient.init(colorsSpace: colorSpace, colors: grassColors as CFArray, locations: grassLocations) {
      context.drawLinearGradient(grassGrad, start: grassStart, end: grassEnd, options: [])
    }

    context.setLineWidth(1)
    context.setFillColor(UIColor.white.cgColor)
    context.setStrokeColor(UIColor.black.cgColor)
  }

  private func drawPetal(in rect: CGRect, inDegrees degrees: Int, inContext context: CGContext) {
    context.saveGState()
    defer { context.restoreGState() }

    let flowerPetal = CGMutablePath()

    let midX = rect.midX
    let midY = rect.midY

    let transform = CGAffineTransform(translationX: -midX, y: -midY).concatenating(CGAffineTransform(rotationAngle:
      degreesToRadians(CGFloat(degrees)))).concatenating(CGAffineTransform(translationX: midX, y: midY))

    flowerPetal.addEllipse(in: rect, transform: transform)
    context.addPath(flowerPetal)
    context.setStrokeColor(UIColor.black.cgColor)
    context.strokePath()
    context.setFillColor(UIColor.white.cgColor)
    context.addPath(flowerPetal)
    context.fillPath()
  }

  private func drawFlowers(in rect: CGRect, in context: CGContext, with colorSpace: CGColorSpace?) {
    context.saveGState()
    defer { context.restoreGState() }

    let flowerSize = CGSize(width: 300, height: 300)
    guard let flowerLayer = CGLayer(context, size: flowerSize, auxiliaryInfo: nil) else {
      return
    }

    guard let flowerContext = flowerLayer.context else {
      return
    }

    // Draw petals of the flower
    drawPetal(in: CGRect(x: 125, y: 230, width: 9, height: 14), inDegrees: 0, inContext: flowerContext)
    drawPetal(in: CGRect(x: 115, y: 236, width: 10, height: 12), inDegrees: 300, inContext: flowerContext)
    drawPetal(in: CGRect(x: 120, y: 246, width: 9, height: 14), inDegrees: 5, inContext: flowerContext)
    drawPetal(in: CGRect(x: 128, y: 246, width: 9, height: 14), inDegrees: 350, inContext: flowerContext)
    drawPetal(in: CGRect(x: 133, y: 236, width: 11, height: 14), inDegrees: 80, inContext: flowerContext)

    let center = CGMutablePath()
    let ellipse = CGRect(x: 126, y: 242, width: 6, height: 6)
    center.addEllipse(in: ellipse, transform: .identity)

    let orangeColor = UIColor(red: 255 / 255.0, green: 174 / 255.0, blue: 49.0 / 255.0, alpha: 1.0)

    // Draw flower
    flowerContext.addPath(center)
    flowerContext.setStrokeColor(UIColor.black.cgColor)
    flowerContext.strokePath()
    flowerContext.setFillColor(orangeColor.cgColor)
    flowerContext.addPath(center)
    flowerContext.fillPath()
    flowerContext.move(to: CGPoint(x: 135, y: 249))
    context.setStrokeColor(UIColor.black.cgColor)
    flowerContext.addQuadCurve(to: CGPoint(x: 133, y: 270), control: CGPoint(x: 145, y: 250))
    flowerContext.strokePath()

    // Draw clones
    context.draw(flowerLayer, at: CGPoint(x: 0, y: 0))
    context.translateBy(x: 20, y: 10)
    context.draw(flowerLayer, at: CGPoint(x: 0, y: 0))
    context.translateBy(x: -30, y: 5)
    context.draw(flowerLayer, at: CGPoint(x: 0, y: 0))
    context.translateBy(x: -20, y: -10)
    context.draw(flowerLayer, at: CGPoint(x: 0, y: 0))
  }
}

5. ViewController.swift

import UIKit
import TwitterKit

class ViewController: UIViewController, UIScrollViewDelegate {
  @IBOutlet weak var skyView: SkyView!
  @IBOutlet weak var containerScrollView: ContainerScrollView!

  override func viewDidLoad() {
    super.viewDidLoad()
    let viewWidth = view.frame.size.width
    let scrollView = UIScrollView(frame: CGRect(x: viewWidth/4, y: 0, width: viewWidth/2, height: 300))
    scrollView.contentSize = CGSize(width: viewWidth * 2.5, height: 200)
    scrollView.isPagingEnabled = true
    scrollView.clipsToBounds = false
    scrollView.delegate = self;

    let scrollViewWidth = scrollView.frame.size.width

    for rageLevel in RageLevel.allCases {
      let imageView = UIImageView.init(image: rageLevel.image)
      let currentXOffset = (scrollViewWidth/2 - imageView.frame.size.width/2) + CGFloat(rageLevel.rawValue) * scrollViewWidth
      let button = UIButton(frame: CGRect(x: currentXOffset, y: 0, width: imageView.frame.size.width, height: imageView.frame.size.height))
      button.tag = rageLevel.rawValue
      button.setImage(rageLevel.image, for: .normal)
      button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
      scrollView.addSubview(button)
    }

    containerScrollView.setScrollView(scrollView)
  }

  func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    let pageNum = Int(scrollView.contentOffset.x / scrollView.frame.size.width)
    if let rageLevel = RageLevel(rawValue: pageNum) {
      skyView.setRageLevel(rageLevel)
    }
  }

  @objc func buttonTapped(sender: UIButton) {
    if (TWTRTwitter.sharedInstance().sessionStore.hasLoggedInUsers()) {
      showTweetCompose(sender.tag)
    } else {
      TWTRTwitter.sharedInstance().logIn { [weak self] session, error in
        guard let self = self else { return }

        if session != nil {
          self.showTweetCompose(sender.tag)
        } else {
          let alert = UIAlertController(title: "Twitter Unavailable", message: "Please turn to your nearest mirror and rage away", preferredStyle: .alert)
          alert.addAction(UIAlertAction(title: "Okay", style: .default, handler: nil))
          self.present(alert, animated: false, completion: nil)
        }
      }
    }
  }

  private func showTweetCompose(_ index: Int) {
    let composer = TWTRComposer()

    if let rageLevel = RageLevel(rawValue: index) {
      composer.setText(rageLevel.tweet)
      composer.setImage(rageLevel.image)
    }

    composer.show(from: self, completion: nil)
  }
}

下面看下实际效果

后记

本篇主要讲述了Curves and Layers，感兴趣的给个赞或者关注~~~