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


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 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
介绍CSS3使用技巧5个
Apr 02 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 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对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
python文件名和文件路径操作实例
2017/09/29 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
Python字典对象实现原理详解
2019/07/01 Python
使用python远程操作linux过程解析
2019/12/04 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
python调用win32接口进行截图的示例
2020/11/11 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
银行求职信个人范文
2013/12/16 职场文书
会计辞职信范文
2014/01/15 职场文书
学生评语大全
2014/04/18 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
2015年征兵工作总结
2015/07/23 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
使用Django实现商城验证码模块的方法
2021/06/01 Python
python中 .npy文件的读写操作实例
2022/04/14 Python
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers