[iOS]Mickey Photos相片編輯App-Part4.貼圖/背景圖/文字/儲存

UIColorPickerViewControllerDelegate/UIGraphicsImageRenderer/UIActivityViewController

這次作品分成四篇

Part1.Delegate/資料傳遞
Part2.翻轉/裁切
Part3.濾鏡
Part4.貼圖/背景圖/文字/儲存

其他篇在這～

[iOS]Mickey Photos相片編輯App-Part1.Delegate/資料傳遞

[iOS]Mickey Photos相片編輯App-Part2.翻轉/裁切

[iOS]Mickey Photos相片編輯App-Part3.濾鏡

貼圖

在class新增變數var cuteImg = UIImageView()

@IBAction func pressCuteImg(_ sender: UIButton) {
    upDownSlider.value = 0
    leftRightSlider.value = 0
    sizeSlider.value = 1
    cuteImg.image = sender.currentImage
    cuteImg.contentMode = .scaleAspectFill
    let width = editImageView.frame.size.width*0.5
    let height = editImageView.frame.size.width*0.5
    cuteImg.frame = CGRect(x: 0, y: 0, width: width, height: height)
    cuteImg.center = editBackgroundView.center
    editBackgroundView.addSubview(cuteImg) 
}

背景圖

在class新增以下兩變數

var backView = UIView() //裝載backgroundImageView
var backgroundImageView = UIImageView()

必須把backView指定在editBackgroundView的上方的第0層，如果不是寫editBackgroundView.insertSubview(backView, at: 0)，而是寫editBackgroundView.addSubview(backView)

如此一來，主圖就會被背景圖蓋住了…

糟糕IU消失了…

用playground呈現一下關係圖，第22行就是上圖IU被蓋住的情況

@IBAction func pressBackground(_ sender: UIButton) {
    backgroundImageView.image = sender.currentBackgroundImage
    backgroundImageView.contentMode = .scaleAspectFill
    backView.addSubview(backgroundImageView) 
    editBackgroundView.insertSubview(backView, at: 0)
}

清除貼圖或背景圖

@IBAction func clear(_ sender: UIButton) {
    if sender == clearItemBtn {
    cuteImg.image = .none
    }
    if sender == clearBgBtn {
    background.image = .none
    }
}

文字

於 struct新增變數var getBoldTimes、var getItalicTimes、var getBigTimes、var getSmallTimes，以便用slider調整粗體\斜體\大小。

於struct新增變數var isCuteImg、var isShowWord，這樣當我調整slider的時候，就可以直接判斷現在是要調整字體還是貼圖大小。

struct PhotoSetting {
    var getBoldTimes = 0
    var getItalicTimes = 0
    var getBigTimes = 0
    var getSmallTimes = 0
    var pressWordTimes = 0
    var isCuteImg = false
    var isShowWord = false
}

運用slider變化貼圖或字體大小與位置

運用UIColorPickerViewControllerDelegate改變字體顏色

必須先讓EditPhotoViewController遵從protocol UIColorPickerViewControllerDelegate，否則EditPhotoViewController無法成為代理人

class EditPhotoViewController: UIViewController ,UIColorPickerViewControllerDelegate

再新增下方程式

func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
    wordTextField.textColor = viewController.selectedColor
}

儲存

利用UIGraphicsImageRenderer讓指定的區塊變成UIImage

利用UIActivityViewController分享或儲存圖片

@IBAction func saveEditedPhoto(_ sender: UIButton) {
    let renderer = UIGraphicsImageRenderer(size:    editBackgroundView.bounds.size)
    let editedImage = renderer.image { UIGraphicsImageRendererContext in
    editBackgroundView.drawHierarchy(in: editBackgroundView.bounds, afterScreenUpdates: true)
    }
    let activityViewController = UIActivityViewController(activityItems: [editedImage], applicationActivities: nil)
    present(activityViewController, animated: true, completion: nil)
}

終於完成這次的作業，寫文章雖然很花時間，但也因此發現許多奇怪的地方😆，再繼續前往下個作業了～

GitHub

alishatsai/photoEdit

參考資料

iOS SDK 選東西的 view controller & delegate 範例

利用 UIGraphicsImageRenderer 將 view 變成圖片(包含只擷取 view 的部分區塊）

將圖片儲存到 iOS 11 的 photo album