第一次作业

最新推荐文章于 2024-11-07 09:43:57 发布

weixin_30300523

最新推荐文章于 2024-11-07 09:43:57 发布

阅读量69

点赞数

文章标签：游戏

原文链接：http://www.cnblogs.com/llbc/p/10479953.html

版权

软件工程综合实践专题第一次作业
作业要求：阅读分析运行别人开发的一个软件或一段程序，简单运行功能并记下心得体会

选择了一个比较简单给头像加圣诞帽的小程序
功能就是给用户的微信头像加圣诞帽
下面是代码及分析补充

1.获取用户信息

wx.getUserInfo({
success: function(res) {
var userInfo = res.userInfo
var avatarUrl = userInfo.avatarUrl //获取用户头像
}
})

2.把图片下载到微信的临时目录

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

3.绘制头像

drawAvatar: function (img) {
ctx.drawImage(img, 0, 0, avatarImg.w, avatarImg.h)//绘制头像尺寸
}

4.绘制帽子

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

开始绘制（以帽子的中心点为原点进行缩放、旋转即帽子长的二分之一和宽的二分之一交汇处）

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) 
}

5.改变帽子的参数

移动帽子:

1 moveHat: function (e) { 
2 hat.x = e.touches[0].x
3 hat.y = e.touches[0].y 
4 that.drawA() 
5 }

旋转帽子：

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(),这主要是每一次移动、旋转、缩放、改变参数时重绘画布。

6.导出图片(利用canvas)

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

7.最后保存到相册

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

然后我看到用户评论说如果有水平翻转功能就更好了，所以我试着加了一个

翻转

rotate3d: function(){
var animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease'
})
//rotate3d: 参数 x,y,z轴, 翻转度数
//其中x,y,z轴为0-1范围，y轴设置为1，代表以y轴为旋转轴
animation.rotate3d(0,1,0,180).step()
this.setData({
rotate3dA: animation.export()
})
}

另外

微信小程序已经调整了获取用户信息的接口，还不知道的开发者看一下官网给出的理由和方法：

为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。开发者可使用以下方式获取或展示用户信息：
1、使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。详情参考文档: https://developers.weixin.qq.com … mponent/button.html
2、使用 open-data 展示用户基本信息。详情参考文档: https://developers.weixin.qq.com … nent/open-data.html

总结：
第一次接触微信小程序的代码，开发小程序比想象中的简单，然后选择的这个小程序写的还比较整齐易懂，不过还是查了很多资料才弄清楚，对于自己能否写出来这种程序还抱有怀疑，继续加油吧。

转载于:https://www.cnblogs.com/llbc/p/10479953.html