開(kāi)門見(jiàn)山，先看效果圖：
StoryMaker.gif
小姐姐有沒(méi)有很好看！是不是該點(diǎn)一波贊！（無(wú)恥，滾粗。。）
可能你已經(jīng)認(rèn)出來(lái)了，低調(diào)低調(diào)。。回歸正題，咳咳。。
(￣ε(#￣)╰╮o(￣皿￣///)
主界面UI構(gòu)成：
主界面.png
- 主體 ImageView ，初始化的時(shí)候加載初始圖
- ToolsView，上方"Close"和"Next"按鈕，下方四個(gè)功能按鈕，從左到右分別是"貼紙 | 涂鴉 | 文字 | 濾鏡"
貼紙 | 涂鴉 | 文字 | 濾鏡.png
大致的流程，一開(kāi)始，四個(gè)功能 View 初始化完畢，隱藏在屏幕的下發(fā)，hidden = YES，點(diǎn)擊按鈕，隱藏NO，做一個(gè) UIView 的平移動(dòng)畫到屏幕正中心，結(jié)束編輯再次平移下去，隱藏YES。
- 每次選中貼紙，會(huì)在主界面生成一個(gè)支持多種手勢(shì)的ImageView（不然咋旋轉(zhuǎn)放大），然后 addSubview 到主體
ImageView - 涂鴉結(jié)束，渲染一張 ImageView ，然后 addSubview 到主體
ImageView - 添加文字（圖中是一只顏文字拼出來(lái)的狗狗）后，同樣會(huì)在主界面生成一個(gè)支持多種手勢(shì)的 Label，然后 addSubview 到主體
ImageView - 濾鏡，最開(kāi)始是通過(guò)CPU來(lái)實(shí)現(xiàn)的，轉(zhuǎn)換成像素然后濾鏡計(jì)算得到。意味著有多少種濾鏡要生成多少新圖片，太耗內(nèi)存，不推薦用，后續(xù)改良。
點(diǎn)擊"Next"按鈕用 ImageView 的 Layer 渲染出編輯后的新
Image，傳遞到后續(xù)，Demo中是保存到相冊(cè)。
實(shí)現(xiàn)思路：
在這先說(shuō)一下大致的實(shí)現(xiàn)思路，后續(xù)系列將詳細(xì)介紹。
- 貼紙的模糊是 UIVisualEffectView 的毛玻璃效果。
- 貼紙和文字的放縮、選擇、移動(dòng)手勢(shì)分別是
UIPinchGestureRecognizer、UIRotationGestureRecognizer、UIPanGestureRecognizer，且通過(guò)delegate回調(diào)放縮和選擇可以同時(shí)識(shí)別。 - 涂鴉是通過(guò)下面三個(gè)方法，獲取到手指位置，并實(shí)時(shí)通過(guò)UIBezierPath畫出來(lái)的，而且偷偷地告訴你，美圖秀秀的涂鴉實(shí)現(xiàn)也是類似的。當(dāng)你打開(kāi)涂鴉界面，先將你右姑娘的食指按下去，別動(dòng)，然后放下你左姑娘的食指，你會(huì)發(fā)現(xiàn)，一條直線，緣，妙不可言。(￣︶￣)> <(￣︶￣)
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
論如何在涂鴉中劃出直線.png
- 雖然貼紙和文字都是 addSubview 到 ImageView 上，屬于平級(jí)，但，你點(diǎn)擊會(huì)優(yōu)先選中后者加上去的。因?yàn)樗械馁N紙View都保存在
@property (nonatomic, strong) NSMutableArray <UIView *> *stickerViewArray;
里，而且是逆序添加進(jìn)去，所以當(dāng)點(diǎn)擊產(chǎn)生，順序遍歷
stickerViewArray，假如點(diǎn)擊在 View 中，則停止遍歷。
不足點(diǎn)：
- 貼紙和文字放大后，border 和刪除都一同放大，其丑無(wú)比，若有童鞋知道解決方法，歡迎告知~
一起放大的border.和刪除png - 濾鏡通過(guò)CPU來(lái)針對(duì)像素點(diǎn)處理，內(nèi)存消耗太多，后續(xù)換其他方式。
- 目前沒(méi)有撤銷操作，確實(shí)有點(diǎn)尷尬。正在構(gòu)思中。。（～￣￣～）
WHStoryMaker接入說(shuō)明：
- 在你需要用到 WHStoryMaker 的時(shí)候引用 WHStoryMakerHeader.h 頭文件，StoryMakeImageEditorViewController 就是你需要的VC。
-
StoryMakeImageEditorViewController 只提供一種初始化方法
- (instancetype)initWithImage:(UIImage *)image;
在初始化的時(shí)候傳入 Image。 - WHStoryMaker 依賴了 Masonry，寫的時(shí)候習(xí)慣性就用了，受“毒害”太深，哈哈。。￣￣
Github鏈接:
