快速入门:使用陀螺测试仪确定角速度 (HTML)

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发,请参阅 最新文档 ]

可以使用陀螺测试仪和用 JavaScript 编写的应用检测用户移动变化。陀螺测试仪补充加速计作为游戏控制器;加速计可以测量线性运动,而陀螺测试仪测量角度矢量(或旋转运动)。

目标: 完成此快速入门后,你将了解如何使用陀螺测试仪检测旋转速度的变化。你可以使用此操作确定用户设备的旋转速度,例如,对游戏中角色移动的影响。

先决条件

你应当熟悉 HTML、JavaScript 和事件。

你使用的设备或仿真器必须支持陀螺测试仪。

完成所需时间: 15 分钟.

说明

1. 打开 Microsoft Visual Studio

打开 Visual Studio 的一个实例。

2. 创建新项目

创建新项目,从“JavaScript/应用商店应用”项目类型中选择“空白应用程序”****。

3. 替换 JavaScript 代码

打开你项目的 default.js 文件,并使用下列内容替换现有的代码。


// For an introduction to the Blank template, see the following documentation:
// https://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
    "use strict";
    var gyrometer;

    function id(elementId) {
        return document.getElementById(elementId);
    }

    function onDataChanged(e) {
        var reading = e.reading;
        id('txtXVelocity').innerHTML = reading.angularVelocityX.toFixed(2);
        id('txtYVelocity').innerHTML = reading.angularVelocityY.toFixed(2);
        id('txtZVelocity').innerHTML = reading.angularVelocityZ.toFixed(2);
    }

    var app = WinJS.Application;

    // This function responds to all app activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            gyrometer = Windows.Devices.Sensors.Gyrometer.getDefault();

            // Choose a report interval supported by the sensor
            var minimumReportInterval = gyrometer.minimumReportInterval;
            var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
            gyrometer.reportInterval = reportInterval;

            // Set the event handler
            gyrometer.addEventListener("readingchanged", onDataChanged);

            WinJS.UI.processAll();
        }
    };

    app.start();
})();

4. 为应用添加 HTML

打开 Windows 和 Windows Phone 项目的 default.html 文件,并将以下 HTML 复制到该文件的 BODY 标记内。


     <div class="item" id="scenario1Output">
        X: <a id="txtXVelocity">no data</a>
        <br />
        Y: <a id="txtYVelocity">no data</a>
        <br />
        Z: <a id="txtZVelocity">no data</a>
        <br />
     </div>

5. 生成、部署并运行应用

按 F5 或选择“调试”>“启动调试”****来构建、部署并运行应用。

应用运行后,你可以通过迁移设备或使用仿真器工具更改加速计的值。

6. 停止应用

  1. 按 ALT+Tab 切换到 Visual Studio。
  2. 按 Shift+F5 或选择“调试”>“停止调试”****来停止应用。

摘要和后续步骤

前面的示例演示了,只需要写入极少的代码即可将陀螺测试仪输入集成到你的应用。

该应用在 onactivated 函数中建立了与默认陀螺测试仪的连接。这通过下面一行实现。

gyrometer = Windows.Devices.Sensors.Gyrometer.getDefault();

onDataChanged 函数中捕获新陀螺测试仪数据。每次传感器驱动程序从传感器接收到新数据时,它都将使用此函数(或事件处理程序)将此值传递到你的应用中。应用在下行中注册此事件处理程序。

gyrometer.addEventListener("readingchanged", onDataChanged);

通过对下面显示的 DOM 元素进行更新,将这些新值写到屏幕上。

    <div class="item" id="scenario1Output">
        X: <a id="txtXVelocity">no data</a>
        <br />
        Y: <a id="txtYVelocity">no data</a>
        <br />
        Z: <a id="txtZVelocity">no data</a>
        <br />
    </div>

该应用在 onactivated 函数中建立了报告间隔。此代码检索设备支持的最短间隔,并将它与所请求的间隔 16 毫秒(大约 60-Hz 刷新率)进行比较。如果支持的最短间隔大于所请求的间隔,则此代码会将报告间隔设置为所支持的最短间隔。否则,它会将报告间隔设置为所请求的间隔。

var minimumReportInterval = accelerometer.minimumReportInterval;
var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
accelerometer.reportInterval = reportInterval;

如果你在编写游戏应用,则后续步骤可能涉及到将陀螺测试仪输入与加速计输入相结合。

相关主题

Gyrometer class

陀螺测试仪示例