Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/463.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
检测Javascript Windows phone移动应用程序中的手机旋转_Javascript_Html_Mobile_Windows Phone_Device Orientation - Fatal编程技术网
Fatal编程技术网
  • javascript/
  • 检测Javascript Windows phone移动应用程序中的手机旋转

检测Javascript Windows phone移动应用程序中的手机旋转

javascript html mobile windows-phone

检测Javascript Windows phone移动应用程序中的手机旋转,javascript,html,mobile,windows-phone,device-orientation,Javascript,Html,Mobile,Windows Phone,Device Orientation,我正在用HTML5为Windows Phone编写一个移动应用程序。我想检测手机绕z轴的旋转（我指的是旋转，例如在涂鸦跳跃中用于使角色向左或向右跳跃） 在我的应用程序中，如果我向左或向右旋转屏幕，屏幕上垂直的线必须保持垂直（现实世界中的绝对位置）。为了实现这一点，我使用了角度的相对值：每次屏幕稍微旋转一点，我都会将线条的点旋转相同的量，但为负值 如果手机放在桌子上或几乎水平放置，这种方法非常有效，但是如果我在前面看手机，这种行为就不那么精确了。无论如何，这当然不是一个大问题，因为大多数用户从上到

我正在用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];
}
您是否尝试过
beta
（用于x轴）或
gamma
（用于y轴）

e、 g

方向值解释 每个轴报告的值表示相对于标准坐标系围绕给定轴的旋转量

  • DeviceOrientationEvent.alpha
    值表示设备绕z轴的运动，以度表示，其值范围为
    0
    到
    360
  • DeviceOrientationEvent.beta
    值表示设备围绕x轴的运动，以度表示，其值范围为
    -180
    到
    180
    。这表示设备的前后运动
  • DeviceOrientationEvent.gamma
    值表示设备绕y轴的运动，以度表示，其值范围为
    -90
    到
    90
    。这表示设备从左向右移动

还值得检查此API

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

将
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
中的值始终为正值，如果向左倾斜，则为负值

这个例子显示了屏幕中间的蓝色框，并将其移动到手机倾斜的方向：

<!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>


var-box=document.getElementById（“box”）；
var log=document.getElementById（“日志”）；
var-smoothx=0；
window.addEventListener（“设备定向”，函数（事件）{
var b=数学绝对值（事件β）/90；
如果（b>1）b=2-b；
var g=事件伽马/90；
如果（Math.abs（event.beta）>90）g=-g；
var x=g/数学最大值（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）；
});
因为传感器似乎对运动非常敏感，所以我实现了一个简单的平滑，在
smoothx
中提供了一个更稳定的值。
使用
x
来获得即时值而不进行平滑处理。

在样式中是否使用相对值和绝对值？很抱歉，我不理解您的问题。@user2242618在windows phone上不起作用，Kindle看起来理想的解决方案是以我的代码中所示的类似方式将这三者（alpha、beta和gamma）结合起来。不过这需要时间。你好，你能告诉我在相对角度的情况下，你的代码会如何变化吗？每次设备方向改变时，我都会这样计算差异：angleDiff=Math.floor（event.alpha）-alphaOld；alphaOld=数学楼层（event.alpha）；但是如果我只是用x变量替换（event.alpha），它就不起作用了。@Sean我代码中的
x
总是相对的。所以我想您可以使用
angleDiff=x
。你需要一个有效的例子吗？“如果你这样做，我会更新我的答案。”肖恩显然我在想一个不同的代码。我将用一个例子更新我的答案。我已经用更多细节更新了问题@射线半径可能你在这里建议的是，当手机几乎水平时，我应该使用alpha，如果手机垂直，我应该使用beta（或gamma）？进一步阅读主题，我发现使用Euler角度是有限的，特别是由于万向节锁。相反，您可以在转换为四元数角度时获得更好的结果。创建了一个示例来说明我的意思。如果这是您要找的，将更新我的答案。@Sean:我的代码笔有帮助吗？ 
<!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>