圣诞帽php,微信小程序“圣诞帽”的实现思路详解
这两天朋友圈被“圣诞帽”刷屏,这个小程序连微信官方都出来辟谣了,又一个现象级的玩意儿。从产品角度而言无疑是非常成功,但从技术角度而言是确实习以为常,创意很重要!简单说一下思路:获取头像,把头像画在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导出图片
微信官方有提供相应APIsaveToPhoto: 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: "保存成功"})
总结
以上所述是小编给大家介绍的微信小程序“圣诞帽”的实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网页设计网站的支持!
圣诞帽php,微信小程序“圣诞帽”的实现思路详解相关推荐
- 微信小程token_微信小程序url与token设置详解
微信小程序url与token设置详解 新浪云应用sae的代码里创建一个weixin.php文件,写入以下代码 isValid(); class wechatAPI { public function ...
- 微信小程序一键置顶操作详解:
微信小程序一键置顶操作详解: 第一种方式:采用scroll-view滚动视图实现 第二种方式,直接用view实现 第一种方式:采用scroll-view滚动视图实现 下面是代码简介: wxml文件代码 ...
- 小程序setdata优化_微信小程序 setData的使用方法详解
微信小程序 setData的使用方法详解 微信小程序 setData的使用方法详解 最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元 ...
- 微信小程序富文本解析点击图片放大_微信小程序解析富文本过程详解
前言 最近公司在开发OTA微信小程序,一些页面的详情内容是HTML富文本格式的的,但是微信小程序不能直接解析HTML,需要将内容中的HTML标签转换成微信小程序所支持的标签. 开始的时候想过自己写方法 ...
- 微信小程序01【目录结构详解、视图与渲染、事件、input、scroll-view】
学习地址:https://www.bilibili.com/video/BV1sx411z77P 笔记01:https://blog.csdn.net/weixin_44949135/article/ ...
- 微信小程序富文本rich-text使用详解-微信小程序系统学习攻略
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序开发中,rich-text 标签可以用来显示富文本 html内容,可以渲染部分html标签,全局支持class和style ...
- java小程序详解_微信小程序登录Java后台接口(详解,附示例代码)
首先看一下官方文档 地址:微信小程序官方文档API登录接口 我们先对官方给的时序图进行简单的分析 1.当小程序调用wx.login()时,会获得一个code(临时登录凭证),然后我们需要用wx.req ...
- 微信小程序四种json配置文件详解
知识点: app.json配置文件 project.config.json配置文件 sitemap.json配置文件 页面文件夹中的.json配置文件 上片文章讲到 微信小程序有四种json配置文件, ...
- 微信小程序进度条样式_详解微信小程序——自定义圆形进度条
微信小程序 自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: 页面初始化 options为页面跳转所带来的参数 ...
- range 小程序picker_微信小程序picker滚动选择器使用详解
今天修改小程序做章节内容筛选使用到了picker滚动选择器,看了官方文档和一些网上的文章后,终于算是弄明白了这个组件的使用,这里把我对这picker滚动选择器的使用记录下: picker基础使用 pi ...
最新文章
- CV03-双线性差值pytorch实现
- 阿里技术文档:Redis+Spring全家桶+Dubbo精选+高性能+高并发
- seaborn使用Catplot函数可视化水平小提琴图(Make Horizontal Violin Plot with Catplot in Seaborn)
- 关于ASP.NET页面打印技术的总结
- 听说你想从事中间件开发?
- 如何提高代码质量:代码复查
- 【转知乎】人工智能会是泡沫吗?
- html大学生活主题,大学生培训主题标语
- 帮助你高效开发Ajax应用的超酷jQuery插件 - AjaxML
- MySQL倒序如何避免filesort_MySQL Using filesort 疑问?
- 99. Recover Binary Search Tree 恢复二叉搜索树
- 如果你恨一个程序员,忽悠他去做iOS开发
- Softmax 函数
- struct interface_GCTT | 接受 interface 参数,返回 struct 在 go 中意味着什么
- 6 redis 编译失败_Redis(NoSQL数据库)基础篇
- python 基础 信息量很大很好,适合复习
- ASP.NET-关于Container dataitem 与 eval方法介绍(转帖)
- android 6.0权限机制的简单封装(支持批量申请权限)
- Hacker News 2018 年度报告出炉
- 美团搜索多业务商品排序探索与实践
热门文章
- Windows 2008 R2 标准版 ie提示 当前安全设置不允许下载该文件 解决办法
- 中国海洋大学计算机网络考研题,2017年中国海洋大学信息科学与工程学院940计算机网络与安全考研题库...
- Behavior tree 编程实战
- 文华财经多个非常实用的期货指标公式,文华财经支撑压力自动画线公式
- NYOJ 19 擅长排列的小名 next_permutation()的用法
- Windows文件换行符转Linux换行符
- 腾讯云技术分享:MySQL AHI 实现解析
- 第二章 Qt窗体应用------修改标题栏图标
- Git commit文件提交到仓库失败原因——Author identity unknown
- CSV文件打开看到双引号