|
我要圣誕帽
采用微信小程序編寫 實(shí)現(xiàn)了為圖片帶帽子的功能
程序結(jié)構(gòu)如下
-
image (在此放置所有圣誕帽的素材)
-
pages (包含了index imageeditor combine文件夾，每個(gè)文件夾中都有四個(gè)文件，后綴名分別為 .js .json .wxss .wxml)
-
index (第一步：選擇底圖，程序設(shè)計(jì)三個(gè)底圖來(lái)源 即微信頭像、相機(jī)、相冊(cè))
-
imageeditor(第二步：實(shí)現(xiàn)選擇圣誕帽 并通過(guò)移動(dòng)和旋轉(zhuǎn)調(diào)整圣誕帽的大小和位置)
-
combine(第三步：將底圖和調(diào)整后的圣誕帽合成新的圖片 并保存至微信相冊(cè))
-
app.js
-
app.json
-
app.wxss
-
project.config.json
核心算法介紹
-
核心算法1:怎么實(shí)現(xiàn) 帽子的實(shí)時(shí)轉(zhuǎn)動(dòng)
-
當(dāng)touchstart時(shí)，保存此時(shí)的touch起始點(diǎn)，并以此時(shí)的底圖和帽子位置作為旋轉(zhuǎn)角度和縮放比例值計(jì)算的參考點(diǎn)
-
當(dāng)touchmove時(shí)，根據(jù)起始點(diǎn) 和 臨時(shí)的終止點(diǎn) 計(jì)算在x/y方向上的移動(dòng)距離，計(jì)算參考點(diǎn)分別 加上這個(gè)距離，得到移動(dòng)后的位置，通過(guò)移動(dòng)前后的位置 計(jì)算移動(dòng)前后位置的變動(dòng) 計(jì)算旋轉(zhuǎn)角和縮放比例
-
當(dāng)touchend時(shí)，重置底圖和帽子的位置及旋轉(zhuǎn)角和縮放比例
-
核心算法2:怎么實(shí)現(xiàn) 合成圖片(利用canvas)
-
首先繪制底圖（根據(jù)屏幕大小、圖片大小計(jì)算左上角和右下角坐標(biāo)）
-
繪制帽子（計(jì)算最終帽子的大小及中心位置 旋轉(zhuǎn)角度,移動(dòng)畫布原點(diǎn)到帽子的中心位置，旋轉(zhuǎn)畫布 并繪制帽子）
|
