土鳖小屋

 找回密码
 欢迎注册

QQ登录

只需一步,快速开始

03广告位出售中
广告出售中配资
搜狗联盟招募 收益最高
亿恩免费建网站 服务器特价
【网维体】微信营销平台
【多线高防】无视一切攻击!广告
百度站长平台 精确提升SEO
21广告位高权重链接招租
大型装修门户助您抢占商机天翼云主机 四川资源池开启
国内/香港主机/试用/更有免费
微信小程序微信营销项目诚招代理
122广告位出售中
广告位 
    查看: 58|回复: 0
    收起左侧

    [Demo] 微信小程序Demo:我要圣诞帽

    [复制链接]
    弗罗多 发表于 2018-5-13 12:15 | 显示全部楼层 |阅读模式
    阿里云学生主机9.9元
    悦淘淘

    马上注册,结交更多好友,享用更多功能,让你轻松玩转土鳖小屋

    您需要 登录 才可以下载或查看,没有帐号?欢迎注册

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

                                   
    登录/注册后可看大图
    程序结构如下
    • 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)
      • 首先绘制底图(根据屏幕大小、图片大小计算左上角和右下角坐标)
      • 绘制帽子(计算最终帽子的大小及中心位置 旋转角度,移动画布原点到帽子的中心位置,旋转画布 并绘制帽子)
      • 游客,如果您要查看本帖隐藏内容请回复



    您需要登录后才可以回帖 登录 | 欢迎注册

    本版积分规则

    QQ|手机版|小黑屋|土鳖小屋 ( 豫ICP备14000521号-2  

    GMT+8, 2018-5-27 15:36

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表