大佬教程收集整理的这篇文章主要介绍了html5 – 以相对坐标获取设备方向旋转,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
即,在那些电话轴从(x1,y1)移动到(x2,y2)的时刻t1和t2之间,它想得到(角度(x2-x1),角度(y1-y2)).
当设备处于纵向模式时(与横向模式相反),这些轴似乎对应于beta和gAMMa.然而,当手机处于垂直状态(底部朝向地面)时,伽马值变得非常不稳定,并且从90度跳到-90度(在相同的情况下,alpha跳跃180度)您可以很容易地看到here on your phone
我想避免这种情况,并获得360范围内的值.这是我到目前为止:
// assuming porTrait mode var beta0,gAMMa0; window.addEventListener('deviceorientation',function(orientation) { if (typeof beta0 === 'undefined') { beta0 = beta; gAMMa0 = gAMMa; } console.log('user has moved to the left by',gAMMa - gAMMa0,' and to the top by',beta - beta0); });
当设备大部分是水平时,它可以正常工作,而当它是垂直时,它根本不工作
绝对坐标系(X,Y,z)是x是东,Y是北,Z是向上的.设备相对坐标系(x,y,z)使得x是正确的,y是顶部而z是向上的.然后,方向角(α,β,γ)是描述三个简单旋转连续的角度,这三个简单旋转将(X,z)变为(x,z),如下所示:
>绕Z旋转α度,将(X,z)转换为(X’,Y’,Z’),Z’= Z
>以β度旋转X’,将(X’,Z’)转换为(X”,Y”,Z”),X”= X’
>用γ度旋转Y”,将(X”,Z”)变换为(x,y = Y”
(它们被称为Z-X’-Y’型的内在Tait-Bryan角)
现在我们可以通过组合简单的旋转矩阵来获得相应的旋转矩阵,每个旋转矩阵对应于三个旋转中的一个.
[ cC 0 sC ] [ 1 0 0 ] [ cA -sA 0 ] R(A,B,C) = Ry(C)*Rx(B)*Rz(A) = | 0 1 0 |*| 0 cB -sB |*[ sA cA 0 ] [ -sC 0 cC ] [ 0 sB cB ] [ 0 0 1 ]
现在,我们感兴趣的是两个位置(x,z)和(x’,y’,z’)之间的右 – 左(y轴)和自上而下(x轴)旋转增量的角度到方向(A,C)和(A’,B’,C’)
(x’,z’)的坐标(x’,z’)由R(A’,C’)给出* R(A,C)^ – 1 = R(A’,C’)* R(A,C)^ T,因为逆是正交(旋转)矩阵的转置.最后,如果z’= p * xq * yr * z,那些旋转的角度是围绕左右轴的p和围绕自上而下的q的角度(对于小角度,这是假的,这假设频繁的方向更新,否则asin(p)和asin(r)离真相更近)
所以这里有一些javascript来@L_874_7@旋转矩阵:
/* * gl-matrix is a nice library that handles rotation stuff efficiently * The 3x3 matrix is a 9 element array * such that indexes 0-2 correspond to the first column,3-5 to the second column and 6-8 to the third */ import {mat3} from 'gl-matrix'; let _x,_y,_z; let cX,cY,cZ,sX,sY,sZ; /* * return the rotation matrix corresponding to the orientation angles */ const fromOrientation = function(out,alpha,beta,gAMMa) { _z = alpha; _x = beta; _y = gAMMa; cX = Math.cos( _x ); cY = Math.cos( _y ); cZ = Math.cos( _z ); sX = Math.sin( _x ); sY = Math.sin( _y ); sZ = Math.sin( _z ); out[0] = cZ * cY + sZ * sX * sY,// row 1,col 1 out[1] = cX * sZ,// row 2,col 1 out[2] = - cZ * sY + sZ * sX * cY,// row 3,col 1 out[3] = - cY * sZ + cZ * sX * sY,col 2 out[4] = cZ * cX,col 2 out[5] = sZ * sY + cZ * cY * sX,col 2 out[6] = cX * sY,col 3 out[7] = - sX,col 3 out[8] = cX * cY // row 3,col 3 };
现在我们得到了角度增量:
const deg2rad = Math.PI / 180; // Degree-to-Radian conversion let currentRotMat,prevIoUsRotMat,inverseMat,relativeRotationDelta,@R_505_10586@lRightAngularMovement=0,@R_505_10586@lTopAngularMovement=0; window.addEventListener('deviceorientation',({alpha,gAMMa}) => { // init values if necessary if (!prevIoUsRotMat) { prevIoUsRotMat = mat3.create(); currentRotMat = mat3.create(); relativeRotationDelta = mat3.create(); fromOrientation(currentRotMat,alpha * deg2rad,beta * deg2rad,gAMMa * deg2rad); } // save last orientation mat3.copy(prevIoUsRotMat,currentRotMat); // get rotation in the prevIoUs orientation coordinate fromOrientation(currentRotMat,gAMMa * deg2rad); mat3.transpose(inverseMat,prevIoUsRotMat); // for rotation matrix,inverse is transpose mat3.multiply(relativeRotationDelta,currentRotMat,inverseMat); // add the angular deltas to the cummulative rotation @R_505_10586@lRightAngularMovement += Math.asin(relativeRotationDelta[6]) / deg2rad; @R_505_10586@lTopAngularMovement += Math.asin(relativeRotationDelta[7]) / deg2rad; }
最后,考虑到屏幕方向,我们必须更换
_z = alpha; _x = beta; _y = gAMMa;
通过
const getScreenOrientation = () => { switch (window.screen.orientation || window.screen.mozOrientation) { case 'landscape-priMary': return 90; case 'landscape-secondary': return -90; case 'porTrait-secondary': return 180; case 'porTrait-priMary': return 0; } if (window.orientation !== undefined) return window.orientation; }; const screenOrientation = getScreenOrientation(); _z = alpha; if (screenOrientation === 90) { _x = - gAMMa; _y = beta; } else if (screenOrientation === -90) { _x = gAMMa; _y = - beta; } else if (screenOrientation === 180) { _x = - beta; _y = - gAMMa; } else if (screenOrientation === 0) { _x = beta; _y = gAMMa; }
请注意,累积的左右和上下角度将取决于用户选择的路径,并且无法直接从设备方向推断,但必须通过移动进行跟踪.您可以通过不同的动作到达相同的位置:
>方法1:
>保持手机水平并顺时针旋转90度. (这既不是左右也不是上下旋转)
>将手机置于横向模式,然后向您旋转90度. (这不是90度左右旋转)
>让手机朝向你,然后旋转90度,这样就可以了. (这不是90度左右旋转)
>方法2:
>将手机旋转90度,使其面向您并垂直(这是一个90度的上下旋转)
以上是大佬教程为你收集整理的html5 – 以相对坐标获取设备方向旋转全部内容,希望文章能够帮你解决html5 – 以相对坐标获取设备方向旋转所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。