版本記錄
版本號 | 時間 |
---|---|
V1.0 | 2021.05.30 星期日 |
前言
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(一)
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)
}
}
後記
本篇主要講述了以高效的方式繪製圖案,感興趣的給個贊或者關注~~~