首页 › 教程频道› 小程序开发 › 查看内容

微信小程序Demo：我要圣诞帽

作者：模板之家 2018-5-17 08:43 4796人关注

我要圣诞帽采用微信小程序编写实现了为图片带帽子的功能程序结构如下 image (在此放置所有圣诞帽的素材) pages (包含了index imageeditor combine文件夹，每个文件夹中都有四个文件，后缀

我要圣诞帽

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

程序结构如下

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)
- 首先绘制底图（根据屏幕大小、图片大小计算左上角和右下角坐标）
- 绘制帽子（计算最终帽子的大小及中心位置旋转角度,移动画布原点到帽子的中心位置，旋转画布并绘制帽子）

原作者: 模板之家来自: 网络收集

上一篇：小程序中为何无法setData赋值？

下一篇：小程序子组件button怎么调用from提交？

		自动登录	找回密码
密码			立即注册

搜索本站精品资源