用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

497

主题

857

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
11451
2018-5-5 16:27:28 Rolan 管理员 楼主 52677
我要圣诞帽
采用微信小程序编写 实现了为图片带帽子的功能
step3.jpg
程序结构如下
  • 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)
    • 首先绘制底图(根据屏幕大小、图片大小计算左上角和右下角坐标)
    • 绘制帽子(计算最终帽子的大小及中心位置 旋转角度,移动画布原点到帽子的中心位置,旋转画布 并绘制帽子)




项目地址:https://github.com/jasscia/ChristmasHat
项目下载: ChristmasHat-master.zip (1.16 MB, 下载次数: 866)
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
还可以加QQ交流群咨询:536592077。
感谢大神分享, 最近一直在找相关demo! 真的非常感谢!
感谢大神!!!!
学习了
2018-11-28 16:18:35 w16 新手上路
5#
感谢大神
发新帖
您需要登录后才可以回帖 登录 | 立即注册