微信小程序“圣诞帽”的实现思路详解


Posted in HTML / CSS onDecember 28, 2017

这两天朋友圈被“圣诞帽”刷屏,这个小程序连微信官方都出来辟谣了,又一个现象级的玩意儿。从产品角度而言无疑是非常成功,但从技术角度而言是确实习以为常,创意很重要!简单说一下思路:获取头像,把头像画在Canvas里面,接着往Canvas里画帽子,调整帽子的参数(位置、大小、旋转),最后保存为图片。

先来看看效果

微信小程序“圣诞帽”的实现思路详解 

思路

1.获取用户头像

wx.getUserInfo({
    success: function(res) {
        var userInfo = res.userInfo
        var avatarUrl = userInfo.avatarUrl
  }
})

这里有个问题需要注意,canvas不支持网络图片,上面获取的只是头像图片地址,所以在这里要把图片下载到微信的临时目录。代码如下:

wx.downloadFile({   
    url: userInfo.avatarUrl, 
    success: function (res) {    
        if (res.statusCode === 200) {      
            avatarUrl = res.tempFilePath //这里的地址是指向本地图片 
        }     
    }  
})

获取头像这一步用的是微信现成的API 比较方便。

2.绘制用户头像

此处封装了常用的方法,下方avatarImg.w和avatarImg.h是指头像的大小。

drawAvatar: function (img) {
    ctx.drawImage(img, 0, 0, avatarImg.w, avatarImg.h)
}

绘制图片使用drawImage函数

3.绘制帽子

绘制帽子之前,我定义了一个对象object来保存帽子的参数

var hat = { 
    url: "../res/hat01.png", 
    w: 40,  
    h: 40,  
    x: 100, 
    y: 100, 
    b: 1,//缩放的倍率
    rotate: 0//旋转的角度
}

接下来开始绘制帽子

drawHat: function (hat) { 
    ctx.translate(hat.x, hat.y) 
    ctx.scale(hat.b, hat.b) 
    ctx.rotate(hat.rotate * Math.PI / 180) 
    ctx.drawImage(hat.url, -hat.w / 2, -hat.h / 2, hat.w, hat.h) 
}

这里要稍微解释下,是以帽子的中心点为原点进行缩放、旋转

ctx.translate(hat.x, hat.y) //translate是将画布的中心点移动到指定坐标处

此时的原点已经从(0,0)移动到(x,y),也就是帽子的中心点,帽子长的二分之一和宽的二分之一交汇处。

ctx.drawImage(hat.url, -hat.w / 2, -hat.h / 2, hat.w, hat.h)

画帽子的关键是把x,y 移动到原点之外,示意图如下:

微信小程序“圣诞帽”的实现思路详解 

4.改变帽子的参数

移动帽子:

moveHat: function (e) { 
     hat.x = e.touches[0].x
     hat.y = e.touches[0].y 
     that.drawA() 
 }

旋转帽子:

rotateHat: function (e) {  
     hat.rotate = e.detail.value    //这一块偷懒了,用slider组件 ,滑动取值
     that.drawA() 
 }

缩放帽子:

scaleHat: function (e) {  
     hat.b = e.detail.value   
     hat.w = 40 * hat.b    
     hat.h = 40 * hat.b    
     that.drawA()    ////此处用slider组件 ,滑动取值 
}

改变帽子样式:

changeHat: function (e) {
    hat.url = e.currentTarget.dataset.url  //改变帽子的样式   
    that.drawA() 
}

这几个方法中都有drawA(),这主要是每一次移动、旋转、缩放、改变参数时重绘画布。

5.Canvas导出图片

微信官方有提供相应API

saveToPhoto: function () {
    wx.canvasToTempFilePath({  
        x: 0,
        y: 0,
        width: 240,
        height: 240,
        destWidth: 240,
        destHeight: 240,
        canvasId: 'ctx',
        success: function (res) {
            //canvas转图片成功回调
        }
    })
}

最后保存到相册

wx.saveImageToPhotosAlbum({
    filePath: res.tempFilePath,
}) 
wx.showToast({title: '保存成功'})

总结

以上所述是小编给大家介绍的微信小程序“圣诞帽”的实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 #HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 #HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 #HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 #HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 #HTML / CSS
canvas如何绘制钟表的方法
Dec 13 #HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 #HTML / CSS
You might like
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
php中session与cookie的比较
2015/01/27 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
vue debug 二种方法
2018/09/16 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
github配置使用指南
2014/11/18 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
通过cmd进入python的实例操作
2019/06/26 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
python切割图片的示例
2020/11/12 Python
Python 实现集合Set的示例
2020/12/21 Python
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
单位办理社保介绍信
2014/01/10 职场文书
工作过失检讨书
2014/02/23 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
关于童年的读书笔记
2015/06/26 职场文书
关于开学的感想
2015/08/10 职场文书
Redis 常见使用场景
2021/08/30 Redis