Toggle navigation
登录
注册
模板风格
购买
商业授权
主机域名
专业授权
代理加盟
小程序
帮助
视频教程
易优技巧
常见问题
易优手册
标签工具
案例
应用市场
源码
插件
问答
组件库
小程序模板网
首页
小程序模板网
开发文档
小程序开发教程
正文
我要圣诞帽
我要圣诞帽
采用微信小程序编写 实现了为图片带帽子的功能
程序结构如下
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
点击咨询
热门问题
最新问题
1
微信小程序自定义组件 - 表格组件来啦
2
微信小程序自定义navigationBar顶部导航栏,兼容适配所有机型(附完整案例)
3
手机界面设计尺寸规范
4
小程序-记牌器
5
微信小程序app.json文件常用配置说明
6
微信小程序获得session_key和openId(加解密、签名系列)
7
微信小程序|实现界面滑动切换
8
小程序登录的最优流程
9
微信小程序尺寸单位rpx和样式使用详解
10
微信小程序-scroll-view滚动到指定位置(类似锚点)
1
微信小程序app.json文件常用配置说明
2
微信小程序文字控制单行超过显示省略号
3
微信小程序参数传递的几种方法
4
微信小程序使用button按钮分享
5
微信小程序的setData
6
小程序分享,获取openid
7
微信小程序-实现tab
8
微信开发者工具新建和导入小程序
9
微信小程序实现点击拍照长按录像功能
10
微信小程序必知知识
产品
商业授权
开通会员
代理加盟
推荐主机
服务
更新日志
用户案例
加入Q群
增值服务
帮助
易优问答
标签手册
易优技巧
功能字典
关于
关于易优
知识产权
版权声明
隐私协议
工作日 8:30-12:00 14:30-18:00
周六及部分节假日提供值班服务
联系我们
QQ在线咨询
在线客服
加入Q群
新手福利
微信客服
工作日 8:30-12:00 14:30-18:30