jQuery設備方向範圍轉換爲0到100之間的百分比

Question

我試圖通過使用我智能手機中的陀螺儀來控制HTML元素。我設法提取了陀螺儀的值（Alpha，Beta和Gamma），但無法設法將其轉換爲能夠以我想要的方式操作對象的方式。

設備的起始位置處於橫向模式，位於用戶的正前方;就像平板電視一樣。該設備將被插入Google Cardboard查看器中。

附圖說明了我想達到的目標。

1. 的對象在CSS中 「左」 的百分比。
2. 設備的方向而旋轉頭從左至右

我似乎無法找到一種方法來rotaion移動範圍「轉換」爲百分比值介於0和100％。

例如：

• 如果我看上去稍偏左，阿爾法值約爲22/23和左比例應該在25
• 如果我看上去有點權，阿爾法值約爲338/337，左邊的百分比應該在75左右。

你們能幫我嗎？

最好的問候，

彼得

Answer 1

你得到這個有點不對勁，檢查更多的細節在這裏：https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

• 的DeviceOrientationEvent.alpha值代表的議案圍繞z軸的設備，以度數表示，值爲 ，範圍爲0至360.
• DeviceOrientationEvent.beta value表示設備圍繞x軸的運動，用度數表示，值爲 ，範圍從-180到180.這表示設備的前後運動爲 。
• 的DeviceOrientationEvent.gamma值表示繞y軸的裝置中，在度範圍從-90到90的值表示 的運動這表示左到 裝置的右側運動。

EST-西部和南北位置，通知Z不是在XY軸表示

• X - β：表示，從西到東
• 軸y - gamma：表示從南到北的座標軸
• z - alpha：代表了軸垂直於地面

與CSS道具今後：

• X - β：表示top屬性
• ÿ - γ：表示左property
• z - alpha： not必要的可用於2d的CSS，但你可以用它來縮放或角度2d的形狀，div或圖像。

左屬性，您應該使用伽瑪設備的方向，這裏是一個很好的例子（砌體水平伽馬），其中留在百分之CSS道具是用來水平點的位置。

試形式在這裏移動：https://jsfiddle.net/f7tdrb87/

百分比計算：

function precentageIn180(value) 
{ 
    var percent = ((value * 100)/180).toFixed(0); 
    return percent; 
} 

和區間[-90，90]移位到[0,180]，其中0 == 0％和180 = = 100％，所以一直使用event.gamma + 90;

var point = document.querySelector('.point'); 
 
var masonryLevel = document.querySelector('.masonry-level-gama'); 
 
var log = document.querySelector('.log'); 
 

 
var maxY = masonryLevel.clientWidth - point.clientWidth; 
 

 
function precentageIn180(value) 
 
{ 
 
\t var percent = ((value * 100)/180).toFixed(0); 
 
    return percent; 
 
} 
 

 
function handleOrientation(event) { 
 
    var y = event.gamma; // In degree in the range [-90,90] 
 
    log.innerHTML = "gamma: " + y + "\n"; 
 
    //value on gama is [-90, 90] => but we want to have between [0, 180], to be possiblle to compute 100% of 180 
 
    y += 90; 
 
    var percent = precentageIn180(y); 
 
    log.innerHTML += "gamma percent: " + percent + "\n"; 
 
    point.style.left = (percent + "%"); 
 
} 
 

 

 

 
window.addEventListener('deviceorientation', handleOrientation);

.masonry-level-gama { 
 
    position: relative; 
 
    width : 190px; 
 
    height: 40px; 
 
    border: 1px solid #CCC; 
 
    border-radius: 10px; 
 
} 
 

 
.point { 
 
    position: absolute; 
 
    top : 10px; 
 
    left : 50%; 
 
    margin-left: -10px; 
 
    width : 20px; 
 
    height: 20px; 
 
    background: blue; 
 
    border-radius: 100%; 
 
}

<div class="masonry-level-gama"> 
 
    <div class="point"></div> 
 
</div> 
 
<pre class="log"></pre>