美文网首页
CoreGraphic框架解析 (二十七) —— 以高效的方式绘

CoreGraphic框架解析 (二十七) —— 以高效的方式绘

作者: 刀客传奇 | 来源:发表于2021-05-30 21:49 被阅读0次

    版本记录

    版本号 时间
    V1.0 2021.05.30 星期日

    前言

    quartz是一个通用的术语,用于描述在iOSMAC OS X 中整个媒体层用到的多种技术 包括图形、动画、音频、适配。Quart 2D 是一组二维绘图和渲染APICore Graphic会使用到这组APIQuartz Core专指Core Animation用到的动画相关的库、API和类。CoreGraphicsUIKit下的主要绘图系统,频繁的用于绘制自定义视图。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(一)
    21. CoreGraphic框架解析 (二十一) —— Curves and Layers(二)
    22. CoreGraphic框架解析 (二十二) —— Gradients 和 Contexts的简单示例(一)
    23. CoreGraphic框架解析 (二十三) —— Gradients 和 Contexts的简单示例(二)
    24. CoreGraphic框架解析 (二十四) —— 基于Core Graphic的重复图案的绘制(一)
    25. CoreGraphic框架解析 (二十五) —— 基于Core Graphic的重复图案的绘制(二)
    26. CoreGraphic框架解析 (二十六) —— 以高效的方式绘制图案(一)

    源码

    1. Swift

    首先看下工程组织结构:

    下面就是正文啦。

    1. AppDelegate.swift
    
    import UIKit
    
    @UIApplicationMain
    class AppDelegate: UIResponder, UIApplicationDelegate { }
    
    2. SceneDelegate.swift
    
    import UIKit
    
    class SceneDelegate: UIResponder, UIWindowSceneDelegate {
      var window: UIWindow?
    }
    
    3. Game.swift
    
    import UIKit
    
    class Game {
      // MARK: - Properties
      let maxAttemptsAllowed = 5
      let colorSelections: [UIColor] = [.blue, .red, .magenta]
      let totalPatternCount: Int
    
      var score: Int
      var attempt: Int
      var answers: [PatternView.PatternDirection]
    
      private var majorityPatternCount: Int {
        return totalPatternCount / 2 + 1
      }
    
      // MARK: - Object Lifecycle
      init(patternCount count: Int) {
        totalPatternCount = count
        score = 0
        attempt = 0
        answers = []
      }
    
      // MARK: - Gameplay
      func play(_ guess: PatternView.PatternDirection) -> (correct: Bool, score: Int)? {
        if done() {
          return nil
        }
        if guess == answers[attempt] {
          score += 1
          attempt += 1
          return (true, score)
        } else {
          attempt += 1
          return (false, score)
        }
      }
    
      func setupNextPlay() -> (directions: [PatternView.PatternDirection], colors: [UIColor]) {
        var directions: [PatternView.PatternDirection] = []
        var colors: [UIColor] = []
    
        // Get a list of directions that don't belong to the correct answer
        let wrongDirections = PatternView.PatternDirection.allCases.filter {
          $0 != answers[attempt]
        }
        // Get a random number of correct answers to fill, to maintain the majority
        let numberOfCorrectPatterns = Int.random(in: majorityPatternCount ..< totalPatternCount)
    
        // Fill out the return info
        for index in 0..<totalPatternCount {
          // Front load with the correct answer
          if index < numberOfCorrectPatterns {
            directions.append(answers[attempt])
          } else {
            // Next, randomly assign wrong answers
            if let randomDirection = wrongDirections.randomElement() {
              directions.append(randomDirection)
            }
          }
          // Pick a random color for the pattern
          if let randomColor = colorSelections.randomElement() {
            colors.append(randomColor)
          }
        }
        // Randomly reorder the directions
        directions.shuffle()
    
        return (directions, colors)
      }
    
      func done() -> Bool {
        return attempt >= maxAttemptsAllowed
      }
    
      func reset() {
        score = 0
        attempt = 0
        answers.removeAll()
    
        generatePlays()
      }
    }
    
    // MARK: - Private methods
    private extension Game {
      func generatePlays() {
        // Pick the random direction that will be the dominant one
        let allPatternDirections = PatternView.PatternDirection.allCases
        answers = (0..<maxAttemptsAllowed).map { _ in
          // swiftlint:disable:next force_unwrapping
          allPatternDirections.randomElement()!
        }
      }
    }
    
    4. GameViewController.swift
    
    import UIKit
    
    class GameViewController: UIViewController {
      // MARK: - Outlets
      @IBOutlet weak var scoreLabel: UILabel!
    
      @IBOutlet weak var item1PatternView: PatternView!
      @IBOutlet weak var item2PatternView: PatternView!
      @IBOutlet weak var item3PatternView: PatternView!
      @IBOutlet weak var item4PatternView: PatternView!
    
      @IBOutlet weak var leftButton: UIButton!
      @IBOutlet weak var topButton: UIButton!
      @IBOutlet weak var bottomButton: UIButton!
      @IBOutlet weak var rightButton: UIButton!
    
      @IBOutlet weak var choiceFeedbackLabel: UILabel!
    
      // MARK: - Properties
      let numberOfPatterns = 4
      var game: Game?
      var score: Int? {
        didSet {
          if let score = score, let game = game {
            scoreLabel.text = "\(score) / \(game.maxAttemptsAllowed)"
          }
        }
      }
    
      // MARK: - View Lifecycle
      override func viewDidLoad() {
        super.viewDidLoad()
        game = Game(patternCount: numberOfPatterns)
      }
    
      override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        game?.reset()
        score = game?.score
      }
    
      override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        showNextPlay()
      }
    
      override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "resultSegue" {
          if let destinationViewController = segue.destination as? ResultViewController {
            destinationViewController.score = score
          }
        }
      }
    
      // MARK: - Actions
      @IBAction func choiceButtonPressed(_ sender: UIButton) {
        switch sender {
        case leftButton:
          play(.left)
        case topButton:
          play(.top)
        case bottomButton:
          play(.bottom)
        case rightButton:
          play(.right)
        default:
          play(.left)
        }
      }
    }
    
    // MARK: - Private methods
    private extension GameViewController {
      func showNextPlay() {
        guard let game = game else { return }
        // Check if the game is still in progress
        if !game.done() {
          // Get the next set of directions and colors for the pattern views
          let (directions, colors) = game.setupNextPlay()
          // Update the pattern views
          setupPatternView(item1PatternView, towards: directions[0], havingColor: colors[0])
          setupPatternView(item2PatternView, towards: directions[1], havingColor: colors[1])
          setupPatternView(item3PatternView, towards: directions[2], havingColor: colors[2])
          setupPatternView(item4PatternView, towards: directions[3], havingColor: colors[3])
          // Re-enable the buttons and hide the answer feedback
          controlsEnabled(true)
        }
      }
    
      // swiftlint:disable:next identifier_name
      func controlsEnabled(_ on: Bool) {
        // Enable or disable the buttons
        leftButton.isEnabled = on
        topButton.isEnabled = on
        bottomButton.isEnabled = on
        rightButton.isEnabled = on
        // Show or hide the feedback on the answer
        choiceFeedbackLabel.isHidden = on
      }
    
      // Sets up the pattern view given a diretion and color
      func setupPatternView(
        _ patternView: PatternView,
        towards: PatternView.PatternDirection,
        havingColor color: UIColor
      ) {
        patternView.direction = towards
        patternView.fillColor = color.rgba
        patternView.setNeedsDisplay()
      }
    
      // Displays the results of the choice
      func displayResults(_ correct: Bool) {
        if correct {
          print("You answered correctly!")
          choiceFeedbackLabel.text = "\u{2713}" // checkmark
          choiceFeedbackLabel.textColor = .green
        } else {
          print("That one got you.")
          choiceFeedbackLabel.text = "\u{2718}" // wrong (X)
          choiceFeedbackLabel.textColor = .red
        }
        // Visual indicator of correctness
        UIView.animate(withDuration: 0.5) {
          self.choiceFeedbackLabel.transform = CGAffineTransform(scaleX: 1.8, y: 1.8)
        } completion: { _ in
          UIView.animate(withDuration: 0.5) {
            self.choiceFeedbackLabel.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
          }
        }
      }
    
      // Processes the play and displays the result
      func play(_ selection: PatternView.PatternDirection) {
        // Temporarily disable the buttons and make the feedback label visible
        controlsEnabled(false)
        // Check if the answer is correct
        if let result = game?.play(selection) {
          // Update the score
          score = result.score
          // Show whether the answer is correct or not
          displayResults(result.correct)
        }
        // Wait a little before showing the next play or transition to the
        // end game view
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) { [weak self] in
          guard let self = self else { return }
          if self.game?.done() == true {
            self.performSegue(withIdentifier: "resultSegue", sender: nil)
          } else {
            self.showNextPlay()
          }
        }
      }
    }
    
    // MARK: - UIColor extension
    extension UIColor {
      // Returns an array that splits out the RGB and Alpha values
      var rgba: [CGFloat] {
        var red: CGFloat = 0
        var green: CGFloat = 0
        var blue: CGFloat = 0
        var alpha: CGFloat = 0
        getRed(&red, green: &green, blue: &blue, alpha: &alpha)
        return [red, green, blue, alpha]
      }
    }
    
    5. PatternView.swift
    
    import UIKit
    
    class PatternView: UIView {
      var fillColor: [CGFloat] = [1.0, 0.0, 0.0, 1.0]
      var direction: PatternDirection = .top
    
      enum Constants {
        static let patternSize: CGFloat = 30.0
        static let patternRepeatCount: CGFloat = 2
      }
    
      enum PatternDirection: CaseIterable {
        case left
        case top
        case right
        case bottom
      }
    
      let drawTriangle: CGPatternDrawPatternCallback = { _, context in
        let trianglePath = CGPath.triangle(in:
          CGRect(
            x: 0,
            y: 0,
            width: Constants.patternSize,
            height: Constants.patternSize))
        context.addPath(trianglePath)
        context.fillPath()
      }
    
      init(fillColor: [CGFloat], direction: PatternDirection = .top) {
        self.fillColor = fillColor
        self.direction = direction
        super.init(frame: CGRect.zero)
      }
    
      required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
      }
    
      override func draw(_ rect: CGRect) {
        // 1
        guard let context = UIGraphicsGetCurrentContext()
        else { return }
        // 2
        UIColor.white.setFill()
    
        // 3
        context.fill(rect)
        var callbacks = CGPatternCallbacks(
          version: 0,
          drawPattern: drawTriangle,
          releaseInfo: nil)
    
        // 1
        let patternStepX = rect.width / Constants.patternRepeatCount
        let patternStepY = rect.height / Constants.patternRepeatCount
        // 2
        let patternOffsetX = (patternStepX - Constants.patternSize) / 2.0
        let patternOffsetY = (patternStepY - Constants.patternSize) / 2.0
        // 3
        // 1
        var transform: CGAffineTransform
        // 2
        switch direction {
        case .top:
          transform = .identity
        case .right:
          transform = CGAffineTransform(rotationAngle: 0.5 * .pi)
        case .bottom:
          transform = CGAffineTransform(rotationAngle: .pi)
        case .left:
          transform = CGAffineTransform(rotationAngle: 1.5 * .pi)
        }
        // 3
        transform = transform.translatedBy(x: patternOffsetX, y: patternOffsetY)
    
        // 4
        guard let pattern = CGPattern(
          info: nil,
          bounds: CGRect(
            x: 0,
            y: 0,
            width: Constants.patternSize,
            height: Constants.patternSize
          ),
          matrix: transform,
          xStep: patternStepX,
          yStep: patternStepY,
          tiling: .constantSpacing,
          isColored: false,
          callbacks: &callbacks)
        else { return }
    
        // 1
        let baseSpace = CGColorSpaceCreateDeviceRGB()
        guard let patternSpace = CGColorSpace(patternBaseSpace: baseSpace)
        else { return }
        // 2
        context.setFillColorSpace(patternSpace)
        context.setFillPattern(pattern, colorComponents: fillColor)
        context.fill(rect)
      }
    }
    
    extension CGPath {
      // 1
      static func triangle(in rect: CGRect) -> CGPath {
        let path = CGMutablePath()
        // 2
        let top = CGPoint(x: rect.width / 2, y: 0)
        let bottomLeft = CGPoint(x: 0, y: rect.height)
        let bottomRight = CGPoint(x: rect.width, y: rect.height)
        // 3
        path.addLines(between: [top, bottomLeft, bottomRight])
        // 4
        path.closeSubpath()
        return path
      }
    }
    
    6. ResultViewController.swift
    
    import UIKit
    
    class ResultViewController: UIViewController {
      // MARK: - Outlets
      @IBOutlet weak var scoreLabel: UILabel!
    
      // MARK: - Properties
      var score: Int?
    
      // MARK: - View Life Cycle
      override func viewDidLoad() {
        super.viewDidLoad()
        if let score = score {
          scoreLabel.text = "Your final score: \(score)"
        }
      }
    
      // MARK: - Actions
      @IBAction func playAgainPressed(_ sender: Any) {
        presentingViewController?.dismiss(animated: true, completion: nil)
      }
    }
    

    后记

    本篇主要讲述了以高效的方式绘制图案,感兴趣的给个赞或者关注~~~

    相关文章

      网友评论

          本文标题:CoreGraphic框架解析 (二十七) —— 以高效的方式绘

          本文链接:https://www.haomeiwen.com/subject/wsimsltx.html