利用onAccelerometerChange实现水平仪 加速计
发布于 4 年前 作者 chenjie 5033 次浏览 来自 分享

小程序的加速计的接口

wx.onAccelerometerChange(function callback)

监听加速度数据事件。频率根据 wx.startAccelerometer() 的 interval 参数, 接口调用后会自动开始监听。

参数

function callback

加速度数据事件的回调函数

参数

Object res

属性 类型 说明
x number X 轴
y number Y 轴
z number Z 轴

通过以上API我们可以得到下面一段代码,这块可以放到小程序onLoad中回调中

  wx.onAccelerometerChange(function (res) {
		const { x,y,z} = res;
    })

手机的xyz轴

那么 x y z,分别代表 x轴 Y轴 z轴 哪在手机上上如何展示呢

从上图我们可以看到手机的坐标,那么假如我们有一条线为水平在手机中显示

数学知识

如上图,这样我们只要计算x与y的夹角就可以了,接下来怎么计算呢,我们用到两个数学知识

1. Math.atan2()

** Math.atan2()接受两个参数x和y,方法如下:**

angel=Math.atan2(y,x)
x 指定点的 x 坐标的数字。
y 指定点的 y 坐标的数字。
计算出来的结果angel是一个弧度值,也可以表示相对直角三角形对角的角,其中 x 是临边边长,而 y 是对边边长。

**2. 角度=弧度*180/Math.PI

清楚了上面两个知识那么我代码继续写

  wx.onAccelerometerChange(function (res) {
	const { x,y,z} = res;
        //根据公式计算出角度
        const rotateXY = Math.atan2(x,y) * 180 / Math.PI;
        // 这里角度就可以赋值到data上,视图层就可以调这个角度了
          this.setData({
            rotateXY: rotateXY
        })
    })

下面是wxml中的内容

<view style="width:600rpx; height:2rpx;background:red;transform:rotate({{rotateXY}}deg)">

扫码体验

好了,整体就结束了 底部再添加上camera 就可以通过摄像头,来测量物体是否水平, 以下图片可以扫码体验

回到顶部