jQuery 设备方向范围转换为 0 到 100 之间的百分比

Question

我正在尝试使用智能手机中的陀螺仪来控制 HTML 元素。我设法提取了陀螺仪的值（Alpha、Beta 和 Gamma），但无法以能够按照我喜欢的方式操纵对象的方式对其进行转换。

设备的起始位置是横向模式，就在用户面前；就像平板电视一样。该设备将插入 Google Cardboard 查看器。

所附图片解释了我要实现的目标。

对象 "Left" 在 CSS 中的百分比。
从左向右旋转头部时的设备方向

我似乎无法找到一种方法来 "convert" 将旋转运动的范围设置为 0 到 100% 之间的百分比值。

例如：

如果我稍微向左看，Alpha 值在 22/23 左右，左边的百分比应该在 25 左右。
如果我稍微向右看，Alpha 值在 338/337 左右，左边的百分比应该在 75 左右。

你们能帮帮我吗？

此致，

彼得

Answer 1

您理解错了，请在此处查看更多详细信息：https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

The DeviceOrientationEvent.alpha value represents the motion of the device around the z axis, represented in degrees with values ranging from 0 to 360.

The DeviceOrientationEvent.beta value represents the motion of the device around the x axis, represented in degrees with values ranging from -180 to 180. This represents a front to back motion of the device.

The DeviceOrientationEvent.gamma value represents the motion of the device around the y axis, represented in degrees with values ranging from -90 to 90. This represents a left to right motion of the device.

东西向和南北向位置，注意 z 未在 x y 轴中表示

x - beta: Represents the axis from West to East

y - gamma: Represents the axis from South to North

z - alpha: Represents the axis perpendicular to the ground

继续 CSS 道具：

x - beta: Represents top property

y - gamma: Represents left property

z - alpha: not necessary usable in a 2d css but you can use it for zoom or angle to a 2d shape, div or image.

对于左属性，你应该使用伽玛设备方向，这是一个很好的例子（砌体水平伽玛），其中左cssprop in percent用于定位水平点。

在手机上试试这里的表格：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)
{
 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>

jQuery 设备方向范围转换为 0 到 100 之间的百分比

jQuery device orientation range converting to percentage between 0 and 100

css

jquery

device-orientation

gyroscope