EA&UML日拱一卒-0基础学习微信小程序(15)-弄得像真的一样
光显示数字当然没什么意思，我们稍加修改，争取把这个小程序弄的像真的一样。
创建/添加图像资源
首先用Word画，然后转换成png。
接下来在小程序工程中添加images目录，将png文件拷贝到该目录中。
index.wxml
<!--index.wxml-->
<view class="container">
<!-- canvas.wxml -->
<canvas style="width: 300px; height: 300px;" canvas-id="compassCanvas"></canvas>
<view class="usermotto">
<text class="angle_text">{{angle}}</text>
</view>
</view>
添加一个名为compassCanvas，宽和高都是300px的canvas.
index.js
//logs.js
Page({
data: {
angle: '--',
},
//指南针描画
drawCompass: function (direction) {
var center_x = 150
var center_y = 150
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createCanvasContext('compassCanvas')
//根据角度旋转坐标系
context.translate(center_x, center_y);
context.rotate(-direction / 180 * Math.PI);
context.translate(-center_x, -center_y);
//描画方向转盘
context.drawImage('../../images/compass-1.png', 0, 0,
center_x * 2, center_y * 2)
//恢复坐标系
context.translate(center_x, center_y);
context.rotate(direction / 180 * Math.PI);
context.translate(-center_x, -center_y);
//描画指针。
context.beginPath()
context.setLineWidth(5)
context.setStrokeStyle('red')
context.moveTo(140, 112)
context.lineTo(150, 60)
context.lineTo(160, 112)
context.closePath()
context.stroke()
context.draw()
},
//事件处理函数
onLoad: function () {
var that = this;
wx.onCompassChange(function (res) {
//保留1位小数
var direction = res.direction.toFixed(1) + '°';
that.setData({ angle: direction})
that.drawCompass(res.direction);
});
},
})
drawCompass函数
首先通过以canvas中心为轴旋转坐标系，旋转角度角度是负的罗盘角度。这里包含了一个角度到弧度的转换。接下来描画指南针表盘就简单了。
在这个小程序中，表盘转而指针不动，所以首先将坐标系再转回来，最后描画指针。
onLoad函数
在onCompassChange的处理函数中，除了设定angle数据之外，同时调用的上面的drawCompass函数。
动作视频：观看请点这里
虽然说要弄得和真的一样，但这毕竟只是一个练习，我们见好就收，点到为止。
参考资料
canvas绘图接口：
https://mp.weixin.qq.com/debug/wxadoc/dev/api/canvas/reference.html
写在文章的最后
既然已经读到这里了，拜托大家再用一分钟时间，将文章转发到各位的朋友圈，微信群中。本公众号的成长需要您的支持！
以上就是今天的文章，欢迎点赞并推荐给您的朋友！
阅读更多更新文章，请扫描下面二维码，关注微信公众号【面向对象思考】