Question

我正在为HTML5编写Windows Phone的移动应用程序。我想检测手机围绕z轴的旋转（我的意思是旋转，例如在涂鸦跳转中使角色跳到左侧或右侧）。

在我的应用程序中，如果我向左或向右旋转屏幕，屏幕中垂直的线必须保持垂直（现实世界中的绝对位置）。为了实现这一点，我使用角度的相对值：每次旋转屏幕一点时，我将线的点旋转相同的量，但是为负。

如果手机放在桌子上或几乎水平放置，这种方式可以正常工作，但如果我在我面前看手机，行为就不那么精确了。无论如何，这当然不是一个大问题，因为大多数用户从上到下观看手机，但像涂鸦跳跃这样的游戏在这种情况下表现也很完美。

以下是代码的一部分：

window.addEventListener("deviceorientation", handleOrientation, true);

function handleOrientation(event) {

    alphaDiff = Math.floor(event.alpha) - alphaOld;
    alphaOld = Math.floor(event.alpha);

    //Rotation of the vertical line (x1,y1) - (x2,y2) around the center of the screen

    var newPoint = rotate(225, 400, x1, y1, alphaDiff);

    x1 = newPoint[0];
    y1 = newPoint[1];

    newPoint = rotate(225, 400, x2, y2, alphaDiff);

    x2 = newPoint[0];
    y2 = newPoint[1];
}

function rotate(cx, cy, x, y, angle) {

    var radians = (Math.PI / 180) * angle;
    cos = Math.cos(radians);
    sin = Math.sin(radians);
    nx = (cos * (x - cx)) - (sin * (y - cy)) + cx;
    ny = (sin * (x - cx)) + (cos * (y - cy)) + cy;

    return [nx, ny];
}

Answer 1

您是否尝试beta（针对x轴）或gamma（针对y轴）？

e.g。

function handleOrientation(event) {
    var absolute = event.absolute;
    var alpha    = event.alpha; // z-axis
    var beta     = event.beta;  // x-axis
    var gamma    = event.gamma; // y-axis

    // Do stuff with the new orientation data
}

方向值解释

每个轴报告的值表示参考标准坐标系的给定轴周围的旋转量。


DeviceOrientationEvent.alpha值表示设备围绕 z轴的运动，以度为单位，值范围为0到360。

DeviceOrientationEvent.beta值表示设备围绕 x轴的运动，以度为单位，值范围为-180到180。这表示设备的前后运动。

DeviceOrientationEvent.gamma值表示设备围绕 y轴的运动，以度为单位，值范围为-90到90。这表示设备从左到右的运动。

此API也值得检查browser compatibility。

除deviceorientation外，您还可以查看compassneedscalibration和devicemotion。有关deviceorientation的详细信息，请参阅MDN。

Answer 2

foreach ($controlf as $p){ $DOMarray[] = $p; }和beta的组合似乎给出了相当不错的结果。基本上，我将值标准化为特定范围并获得比率。

gamma

最终值为window.addEventListener("deviceorientation", function(event){ var b = Math.abs(event.beta)/90; if(b>1) b = 2-b; var g = event.gamma/90; if(Math.abs(event.beta)>90) g = -g; var x = g/Math.max(0.25,b); });，正数表示正确，负数表示左。它适用于水平放置的手机或面向您的任何角度。

更新：为了使检测工作处于垂直位置，代码会计算手机的倾斜程度以及向哪个方向倾斜。如果手机向右倾斜，x中的值始终为正，如果向左倾斜则为负值。

此示例在屏幕中间显示一个蓝色框，并将其移动到手机倾斜的任何方向：

因为传感器似乎对运动非常敏感，所以我实现了一个简单的平滑，在<!DOCTYPE html> <html> <head><meta name="viewport" content="width=1000,user-scalable=no"/></head> <body style="margin:0"> <pre id="log" style="font-size:4em;"></pre> <div id="box" style="background:#69c;width:100px;height:100px;position:relative;left:450px"></div> <script> var box = document.getElementById("box"); var log = document.getElementById("log"); var smoothx = 0; window.addEventListener("deviceorientation", function(event){ var b = Math.abs(event.beta)/90; if(b>1) b = 2-b; var g = event.gamma/90; if(Math.abs(event.beta)>90) g = -g; var x = g/Math.max(0.25,b); smoothx = smoothx*0.7+x*0.3; box.style.left = Math.max(0, Math.min(900, smoothx*500+450))+"px"; log.innerText = x.toFixed(1)+"\n"+smoothx.toFixed(1); }); </script> </body> </html>中提供了更稳定的值。使用smoothx获得即时值而不进行平滑。

在Javascript Windows Phone移动应用程序中检测手机轮换

2 个答案:

方向值解释