《PhoneGap移动应用开发手册》——1.4节通过加速计事件更新对象的显示位置

    xiaoxiao2024-01-31  138

    本节书摘来自异步社区《PhoneGap移动应用开发手册》一书中的第1章,第1.4节通过加速计事件更新对象的显示位置,作者 【英】Matt Gifford,更多章节内容可以访问云栖社区“异步社区”公众号查看

    1.4 通过加速计事件更新对象的显示位置PhoneGap移动应用开发手册开发者可以利用加速计传感器及其持续更新实现诸多功能,如运动监视游戏和更新屏幕上对象的位置。

    实现步骤下面将通过设备加速计传感器的持续更新,移动屏幕上的元素,作为设备移动的反应。该功能通过如下步骤实现。

    (1)创建HTML初始化框架。在head标签添加cordova JavaScript引用以导入需求的库。

    (2)在body标签中创建两个div元素。将其中第一个的id属性设置为点,作为在设备屏幕上移动的元素。

    (3) 第二个div元素的ID设置为acclerometerData,作为返回的加速度数据输出容器。

    (5)在着手核心代码之前,需要声明一些变量。给watchID设定默认值和围绕屏幕移动的对象显示的圆形半径大小。

    (8)向设备发送请求后,现在需要请求成功和失败情况的处理函数。先是onSuccess函数,该函数处理物体在屏幕上的移动。

    (9)需要申明一些变量来表示移动对象在屏幕上的位置。

    (12)需要确保显示对象不能移出可视范围,始终保持在屏幕界限之内。

    (15)最后,添加一些CSS以创建点标记以用来在设备上显示位置。

    实现原理通过对加速度持续监视,获取设备的移动结果,可以从加速计传感器获取位置变化。通过一些简单的JavaScript可对变化做出反应,基于返回的传感器信息更新一个元素在设备屏幕上的位置。

    本例中,通过计算出dot元素在屏幕上的正确x、y坐标,可以很容易地更改其在屏幕上的位置。为确保元素运动时不超出屏幕范围,需要采取一些条件判断,检查当前位置、元素的半径,以及屏幕本身的范围。

    相关资源:敏捷开发V1.0.pptx
    最新回复(0)