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

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轴）？

例如

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的浏览器兼容性。

除了设备deviceorientation ，您还可以检查compassneedscalibration和设备devicemotion 。 有关deviceorientation更多详细信息，请参阅MDN 。

Answer 2

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 ，正数表示右，负表示左。 它适用于水平放置的手机或面向您的任何角度。

更新：为了使检测工作在垂直位置，代码计算手机倾斜的程度和方向。 如果手机向右倾斜，则x的值始终为正，如果向左倾斜，则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中提供了更稳定的值。 使用x作为立即值而不进行平滑处理。

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

问题描述

2 个解决方案

解决方案1
1 2017-01-07 00:20:43

方向值解释

解决方案2
0 2017-01-07 10:26:24

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

问题描述

2 个解决方案

解决方案1 1 2017-01-07 00:20:43

方向值解释

解决方案2 0 2017-01-07 10:26:24

解决方案1
1 2017-01-07 00:20:43

解决方案2
0 2017-01-07 10:26:24