小程序模板網(wǎng)

我要圣誕帽

發(fā)布時(shí)間:2018-05-17 08:42 所屬欄目:小程序開(kāi)發(fā)教程
我要圣誕帽
采用微信小程序編寫 實(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)畫布 并繪制帽子)


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/24444.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢