采用微信小程序编写 实现了为图片带帽子的功能（微信小程序编写选择题代码）

采用微信小程序编写 实现了为图片带帽子的功能（微信小程序编写选择题代码）

我要圣诞帽

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

程序结构如下

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

过程展示

step 1 旋转底图

step 2 确定底图后 进入下一步

step 3 选择帽子 调整帽子 确定进入下一步

step 4 canvas绘制合成图 并保存至相册

最终成果

核心算法介绍

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。