重力感应API

本文编辑：  Flyinthesky浏览 6334 版权所有，严禁转载

接口说明:

重力感应是利用压电效应实现，简单来说是是测量内部一片重物（重物和压电片做成一体）重力正交两个方向的分力大小，来判定水平方向。

接口用法：

【代码】

wxml

<view class="container">
  <template is="header" data="{{title: 'onAccelerometerChange'}}"/>

  <view class="page-body">
    <view class="page-body-wrapper">
      <text class="page-body-text">倾斜手机即可移动下方小球</text>
      <view class="page-body-canvas">
        <canvas class="page-body-ball" show="{{true}}" canvas-id="big-ball"></canvas>
        <canvas class="page-body-ball" show="{{true}}" canvas-id="small-ball"></canvas>
      </view>
      <view class="page-body-xyz">
        <text class="page-body-title">X: {{x}}</text>
        <text class="page-body-title">Y: {{y}}</text>
        <text class="page-body-title">Z: {{z}}</text>
      </view>
    </view>
  </view>

  <template is="footer" />
</view>

js

Page({
  onReady: function () {
    this.drawBigBall()
    var that = this

    this.position =  {
      x: 151,
      y: 151,
      vx: 0,
      vy: 0,
      ax: 0,
      ay: 0
    }
    wx.onAccelerometerChange(function (res) {
      that.setData({
        x: res.x.toFixed(2),
        y: res.y.toFixed(2),
        z: res.z.toFixed(2)
      })
      that.position.ax = Math.sin(res.x * Math.PI / 2)
      that.position.ay = -Math.sin(res.y * Math.PI / 2)
      //that.drawSmallBall()
    })

    this.interval = setInterval(function () {
      that.drawSmallBall()
    }, 17)

  },
  drawBigBall: function () {
    var context = wx.createContext()
    context.beginPath(0)
    context.arc(151, 151, 140, 0, Math.PI * 2)
    context.setFillStyle('#ffffff')
    context.setStrokeStyle('#aaaaaa')
    context.fill()
    context.stroke()
    wx.drawCanvas({
      canvasId: 'big-ball',
      actions: context.getActions()
    })
  },
  drawSmallBall: function () {
    var p = this.position
    var strokeStyle = 'rgba(1,1,1,0)'

    p.x = p.x + p.vx
    p.y = p.y + p.vy
    p.vx = p.vx + p.ax
    p.vy = p.vy + p.ay

    if (Math.sqrt(Math.pow(Math.abs(p.x) - 151, 2) + Math.pow(Math.abs(p.y) - 151, 2)) >= 115) {
      if (p.x > 151 && p.vx > 0) {
        p.vx = 0
      }
      if (p.x < 151 && p.vx < 0) {
        p.vx = 0
      }
      if (p.y > 151 && p.vy > 0) {
        p.vy = 0
      }
      if (p.y < 151 && p.vy < 0) {
        p.vy = 0
      }
      strokeStyle = '#ff0000'
    }

    var context = wx.createContext()
    context.beginPath(0)
    context.arc(p.x, p.y, 15, 0, Math.PI * 2)
    context.setFillStyle('#1aad19')
    context.setStrokeStyle(strokeStyle)
    context.fill()
    context.stroke()
    wx.drawCanvas({
      canvasId: 'small-ball',
      actions: context.getActions()
    })
  },
  data: {
    x: 0,
    y: 0,
    z: 0
  },
  onUnload: function () {
    clearInterval(this.interval)
  }
})

wxss

.page-body-xyz {
  display: flex;
  justify-content: space-around;
  width: 700rpx;
  margin-top: 50rpx;
  box-sizing: border-box;
}
.page-body-canvas {
  width: 302px;
  height: 302px;
  position: relative;
}
.page-body-ball {
  position: absolute;
  top: 0;
  left: 0;
  width: 302px;
  height: 302px;
}
.page-body-title {
  font-size: 50rpx;
  width: 250rpx;
}

主要方法：

wx.onAccelerometerChange(CALLBACK)

示例代码：

wx.onAccelerometerChange(function(res) {
  console.log(res.x)
  console.log(res.y)
  console.log(res.z)
})