HW4–3 從 playground 調色去背圖片、 從程式製作國旗圖案

調色去背圖

1. 將圖片去背

如何用 Preview App (預覽程式)去背圖片

2. 將圖片導入playground中

在 playground 加入圖片，音樂等素材檔案

3. 召喚圖片，合體，調關於色彩的參數。

參考程式碼部分。

import UIKit
let hellokitty = UIImageView(image: UIImage(named: "hellokitty"))
let pattern = UIImageView(image: UIImage(named: "pattern"))
//先將圖片建立成UIImageView
pattern.frame = hellokitty.frame
pattern.addSubview(hellokitty)
//將pattern的大小、位置設定跟hellokitty一樣大，並將去背的hellokitty疊在pattern上
hellokitty.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 0.4)
pattern
hellokitty.backgroundColor = UIColor(hue: 180/360, saturation: 1, brightness: 1, alpha: 0.5)
pattern
//調整參數的效果

從程式製作國旗圖案

不囉唆上成品。

左側原圖，右側程式做的。

import UIKit
let baseview = UIView(frame: CGRect(x: 0, y: 0, width: 1100, height: 800))
baseview.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
let blueTop = UIView(frame: CGRect(x: 0, y: 75, width: 1100, height: 125))
blueTop.backgroundColor = UIColor(red: 0, green: 56/255, blue: 184/255, alpha: 1)
let blueBottom = UIView(frame: CGRect(x: 0, y: 600, width: 1100, height: 125))
blueBottom.backgroundColor = UIColor(red: 0, green: 56/255, blue: 184/255, alpha: 1)
baseview.addSubview(blueTop)
baseview.addSubview(blueBottom)
let path1 = UIBezierPath()
path1.move(to: CGPoint(x: 430, y: 330))
path1.addLine(to: CGPoint(x: 550, y: 540))
path1.addLine(to: CGPoint(x: 670, y: 330))
path1.close()
let path2 = UIBezierPath()
path2.move(to: CGPoint(x: 430, y: 470))
path2.addLine(to: CGPoint(x: 550, y: 260))
path2.addLine(to: CGPoint(x: 670, y: 470))
path2.close()
let sixPointStarLayer1 = CAShapeLayer()
sixPointStarLayer1.path = path1.cgPath
baseview.layer.addSublayer(sixPointStarLayer1)
let sixPointStarLayer2 = CAShapeLayer()
sixPointStarLayer2.path = path2.cgPath
baseview.layer.addSublayer(sixPointStarLayer2)
sixPointStarLayer1.strokeColor = UIColor(red: 0, green: 56/255, blue: 184/255, alpha: 1).cgColor
sixPointStarLayer2.strokeColor = UIColor(red: 0, green: 56/255, blue: 184/255, alpha: 1).cgColor
sixPointStarLayer1.fillColor = UIColor.clear.cgColor
sixPointStarLayer2.fillColor = UIColor.clear.cgColor
sixPointStarLayer1.lineWidth = 28
sixPointStarLayer2.lineWidth = 28
baseview

心得：

最後的成品雖然還有一些美中不足的地方，但大致上還是挺讓人滿意的，過程最困難的地方就是調整中間的六芒星的參數，試了很多組才達到成品的狀態，雖然花了一些時間，不過看到結果不錯還是覺得挺有成就感的。（程式碼的部分參考網站有作說明可以去查找，這邊就不多闡釋）

參考網站：

從 playground 調色去背圖片

#43 從程式製作國旗圖案

使用 SwiftUI 預覽 UIBezierPath 的繪圖結果