Question

我正在尝试使用智能手机中的陀螺仪来控制HTML元素。我设法提取陀螺仪的值（Alpha，Beta和Gamma），但无法设法翻译它能够以我想要的方式操纵对象。

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

附图说明了我想要实现的目标。

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

我似乎无法找到一种方法将旋转运动范围“转换”为0到100％之间的百分比值。

例如：

如果我略微向左看，Alpha值约为22/23，左侧百分比应为25左右。
如果我看起来略微正确，Alpha值约为338/337，左侧百分比应为75左右。

致以最诚挚的问候，

彼得

Answer 1

您有点不对，请在此处查看更多详情：https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

DeviceOrientationEvent.alpha 值表示设备绕z轴的运动，以度为单位表示值   范围从0到360。

DeviceOrientationEvent.beta 值表示设备围绕x轴的运动，以度为单位表示值   从-180到180.这代表了从前到后的运动   设备。

DeviceOrientationEvent.gamma 值表示设备围绕y轴的运动，以度为单位表示值   范围从-90到90.这表示从左到右的运动   设备

est-west和north-south位置，注意z未在x y轴中表示

x - beta：表示从西到东的轴

y - gamma：表示从南到北的轴

z - alpha：表示垂直于地面的轴

继续使用CSS道具：

x - beta：代表顶级属性

y - gamma：表示左侧属性

z - alpha：无需在2d css中使用，但您可以将其用于缩放或角度为2d形状，div或图像。

对于左侧属性，您应该使用伽马设备方向，这是一个很好的例子（砌体级别gama），其中左侧的css prop百分比用于定位水平点。

在移动设备上尝试表单：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;

＆＃13;

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);

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

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

1 个答案: