登录
注册
模板
购买
商业授权
主机域名
专业授权
易优代理
外贸站
应用
源码
插件
问答
帮助
视频教程
易优技巧
常见问题
易优手册
标签工具
更多
小程序
组件库
案例库
小程序模板网
首页
小程序模板网
开发文档
小程序开发教程
正文
我要圣诞帽
发布时间:2018-05-17 08:42
所属栏目:
小程序开发教程
我要圣诞帽
采用微信小程序编写 实现了为图片带帽子的功能
程序结构如下
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