devicemotion：记录设备的移动路径

问题描述

我正在尝试使用devicemotion事件记录用户设备的移动路径

我正在使用gyronorm.js库。

我正在使用acceleration事件提供的devicemotion来计算设备的距离和速度，并在画布元素上画一条线

但是acceleration不稳定，以至于当我停止移动设备时，速度值也不会变为零，并且线条不断画图。

<!DOCTYPE html>
<html lang="en">
  <head>
    <Meta charset="UTF-8" />
    <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/gyronorm@2.0.6/dist/gyronorm.complete.min.js"></script>
  </head>
  <body style="margin: 0;">
    <button id="req-btn">req permission for ios 13+</button>
    <button id="start-btn">start GN</button>
    <div style="position: relative;">
      <canvas
        id="canvas"
        width="1000"
        height="1000"
        style="width: 100%; border: 1px solid red; Box-sizing: border-Box;"
      ></canvas>
      <pre
        id="pre"
        style="position: absolute; top: 0; left: 0; width: 100%;"
      ></pre>
    </div>
    <script>
      var pos = {
        x: 0,y: 500
      };
      var vel = {
        x: 0,y: 0
      };
      var $canvas = document.getElementById('canvas');
      var ctx = $canvas.getContext('2d');
      ctx.strokeStyle = '#0000ff';
      ctx.linewidth = 10;
      ctx.moveto(pos.x,pos.y);

      function drawLine() {
        ctx.lineto(pos.x,pos.y);
        ctx.stroke();
      }

      function renderInfo() {
        document.getElementById('pre').textContent = JSON.stringify(
          {
            pos: pos,vel: vel
          },null,2
        );
      }

      renderInfo();

      document.getElementById('req-btn').addEventListener('click',function () {
        if (DeviceMotionEvent.requestPermission) {
          DeviceMotionEvent.requestPermission().then(res => {
            console.log(res);
          });
        }
      });

      document
        .getElementById('start-btn')
        .addEventListener('click',function () {
          function accToVel(v0,a,t) {
            t = t / 1000;
            return v0 + a * t;
          }

          function accTodis(v0,t) {
            t = t / 1000;
            return v0 * t + (a * t * t) / 2;
          }
          var gn = new Gyronorm();
          gn.init()
            .then(() => {
              let prev = performance.Now();
              let v0x = 0;
              let v0y = 0;
              gn.start(data => {
                let Now = performance.Now();
                let deltaT = Now - prev;
                const dmX = data.dm.x;
                const dmY = data.dm.y;

                const deltaX = accTodis(vel.x,dmX,deltaT) * 200;
                const deltaY = accTodis(vel.y,dmY,deltaT) * 200;
                pos.x -= deltaX;
                pos.y += deltaY;
                drawLine();
                vel.x = accToVel(vel.x,deltaT);
                vel.y = accToVel(vel.y,deltaT);
                prev = Now;
                renderInfo();
              });
            })
            .catch(err => {
              console.log(err);
            });
        });
    </script>
  </body>
</html>

如何使线条画更稳定？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

devicemotion gyroscope javascript