cvmachine.com - 申博开户网

搜索: 您的位置主页 > 网络频道 > 阅读资讯:怎么样使用微信小程序佩戴圣诞帽?

怎么样使用微信小程序佩戴圣诞帽?

2018-01-05 17:36:52 来源:www.cvmachine.com 【

怎么样使用微信小程序佩戴圣诞帽?

这两天朋友圈被“圣诞帽”刷屏,这个小程序连微信官方都出来辟谣了,又一个现象级的玩意儿。从产品角度而言无疑是非常成功,但从技术角度而言是确实习以为常,创意很重要!简单说一下思路:获取头像,把头像画在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: '保存成功'})

总结

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

188bet uedbet 威廉希尔 明升 bwin 明升88 bodog bwin 明升m88.com 18luck 188bet 澳门彩票 unibet unibet Ladbrokes Ladbrokes 12bet 真钱的棋牌游戏 casino m88明升 明升 明升 m88.com 188bet m88 明陞 uedbet赫塔菲官网 365bet官网 nba英文官网 嘉年华官网 皇冠备用 火箭队官网 中国人论坛 bet 单双公式 博彩资讯网 w88优德 港京印刷图库 澳门足球盘 球盘 娱乐场 联众网站 沙龙365 7080棋牌游戏 真钱 澳门回归日期 大众娱乐网 卡宾官方旗舰店 mg电子 全亚洲首选288x nba即时比分 本港 中国足彩竞猜网 斗地主规则 七星彩论坛图规 网上赌博 单双规律 沈泳 华夏娱乐网 明升备用网址 梦网书城 盈禾国际 明升体育 博狗沃鑫 卡宾官方旗舰 信誉赌场 球探比分网 竞彩论坛空间 三亚娱乐 soutec 北京福利彩票 澳门彩票公司 北京pk10 凤凰 纸牌小游戏 皇冠现金代理 银河国际亚洲首选288x 三六八高手论坛 空中城市 赌球心得 188比分 让球规则 三星娱乐城 诺贝尔娱乐城 今天有nba直播吗 5060全讯网 新世纪 久乐娱乐场 世界杯盘口 易胜博 麻将单机版 华人娱乐总站 财神爷心水论坛 巴特 澳门百利宫 明升 红姐统一主图库 九龙老牌图库 打牌 娱乐王子 娱乐真人 亚豪平台 真人娱乐 飞禽走兽老虎机 188bet下载 博发娱乐城 北单 陈怀生 比分188 百万图库 老挝赌博 pc蛋蛋注册 天上人间娱乐 红姐统一图库 产业新闻网 葡京

本文地址:http://www.cvmachine.com/a/question/95615.html
Tags: 微信 程序 圣诞帽
编辑:申博开户网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部