在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