小程序模板网

首页小程序模板网开发文档小程序开发教程正文

我要圣诞帽

我要圣诞帽

采用微信小程序编写实现了为图片带帽子的功能

程序结构如下

image (在此放置所有圣诞帽的素材)
pages (包含了index imageeditor combine文件夹，每个文件夹中都有四个文件，后缀名分别为 .js .json .wxss .wxml)
- index (第一步：选择底图，程序设计三个底图来源即微信头像、相机、相册)
- imageeditor(第二步：实现选择圣诞帽并通过移动和旋转调整圣诞帽的大小和位置)
- combine(第三步：将底图和调整后的圣诞帽合成新的图片并保存至微信相册)
app.js
app.json
app.wxss
project.config.json

核心算法介绍

核心算法1:怎么实现帽子的实时转动
- 当touchstart时，保存此时的touch起始点，并以此时的底图和帽子位置作为旋转角度和缩放比例值计算的参考点
- 当touchmove时，根据起始点和临时的终止点计算在x/y方向上的移动距离，计算参考点分别加上这个距离，得到移动后的位置，通过移动前后的位置计算移动前后位置的变动计算旋转角和缩放比例
- 当touchend时，重置底图和帽子的位置及旋转角和缩放比例
核心算法2:怎么实现合成图片(利用canvas)
- 首先绘制底图（根据屏幕大小、图片大小计算左上角和右下角坐标）
- 绘制帽子（计算最终帽子的大小及中心位置旋转角度,移动画布原点到帽子的中心位置，旋转画布并绘制帽子）

易优小程序（企业版）+灵活api+前后代码开源码云仓库:

本文地址：https://www.eyoucms.com/wxmini/doc/course/24444.html 复制链接如需定制请联系易优客服咨询：800182392 点击咨询

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

热门问题
最新问题

产品

服务

帮助

关于

工作日 8:30-12:00 14:30-18:00
周六及部分节假日提供值班服务

在线客服
加入Q群
新手福利

: 微信客服