圖片編輯器主要包括:畫筆锋拖,馬賽克,裁剪砰碴,添加文字表情,濾鏡等功能板丽。
圖片編輯簡介
編輯頁面是蓋在圖片上的一層操作面板呈枉,選擇不同的bar來處理不同的編輯場景
視圖層級圖
馬賽克處理為例:在編輯頁面上蓋里一個masaicView,masaicView分為上下2層,下面一層為加了CIPixellate濾鏡的圖層,上面一層為原始圖片猖辫。雖然手指的移動酥泞,移動的路徑變透明就顯示出底層的馬賽克效果。用戶操作時感覺就像隨手機移動而變成馬賽克啃憎。最后截屏保存芝囤。
UML 架構(gòu)圖
1.每一個編輯功能我稱為一個:tool,如DrawTool,繼承ImageToolBase辛萍。ImageEditorVC可以視作一個大的tool凡人,它里面包含裁剪,馬賽克叹阔,編輯都子工具挠轴。 所有的tool都必須實現(xiàn)ImageToolProtocol協(xié)議。
2.底部的工具欄是一個toolbarItem的集合耳幢,每一個按鈕岸晦,或者說一個編輯功能都是一個item
3.無論是toolbar還是tool,他們的信息都保存為一個ImageToolInfo對象
手勢識別
我這里的處理是在每個編輯組件中處理的睛藻,好的做法應(yīng)該是:手勢引擎既要『大一統(tǒng)』式地管理启上,又要與具體響應(yīng)手勢的元素視圖進行解耦,做法就是統(tǒng)一接口店印,制定標準冈在。可以配置元素對象來實現(xiàn)對手勢響應(yīng)的規(guī)則按摘,更加靈活自如包券,而且零耦合。
最后
本文理論參考騰訊小哥的多媒體編輯模塊架構(gòu)設(shè)計
關(guān)于濾鏡方面炫贤,我用的是CIFilter炉旷,好的做法是適應(yīng)GPU加速渲染
有興趣的可以學習:GPUImage
imageEditorViewController實現(xiàn)UIScrollViewDelegate谜慌,因為圖片裁剪后需要調(diào)整大小励负。需要動態(tài)調(diào)整maximumZoomScale梯嗽,minimumZoomScale ,ZoomScale掠河。我是直接搬的CLImageEditor
沒錯亮元,我就是代碼的搬運工??
在圖片上添加icon,并拖動
最后附上所有源代碼下載GitHub:ios圖片編輯器