个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
27
4
基本上，我想要创 build 备方向值 alpha、beta 和 gamma 的可视化表示。到目前为止，我已经设法使用 innerHTML 以纯文本形式显示值，但我想为每个值创建一系列“条形图”。我根据自己的想法画了一张非常粗略的图:
基本上，我希望条形图随着 alpha、beta 和 gamma 值的变化而移动。这就是我的代码现在的样子。
<!DOCTYPE HTML>
<html>
<body>
<p>Alpha: <span id="alpha"></span></p>
<p>Beta: <span id="beta"></span></p>
<p>Gamma: <span id="gamma"></span></p>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
// Listen for device orientation event
window.ondeviceorientation = function(eventData)
{
// Show alpha, beta and gamma values
document.getElementById('alpha').innerHTML = Math.round(eventData.alpha);
document.getElementById('beta').innerHTML = Math.round(eventData.beta);
document.getElementById('gamma').innerHTML = Math.round(eventData.gamma);
}
</script>
</body>
</html>
我非常怀疑我能否使用内部 HTML 来完成此操作，因为我认为我需要使用 CSS 样式。这让我觉得 Canvas 可能有效，但我无法使用 ondeviceorientation 对其进行初始化。如果有任何帮助，我将不胜感激。
最佳答案
您不需要 Canvas 。您只需更改 span 的宽度并使用 CSS 设置颜色即可完成此操作。
首先确保您的 span 具有 display : inline-block 或 display : block 的 CSS 属性，否则更改宽度将不起作用。或者，您可以将它们设为 div 而不是 span。还要确保它具有高度属性集，例如 30px。
接下来，您可以使用 css 或内联样式为 alpha、beta 和 gamma 设置 background-color 属性。然后使用 javascript 根据设备方向简单地更改 Element.style.width 属性(以像素为单位)。
您可能需要深入考虑的是您希望条形的大小代表什么以及它们的精确行为。该设计决定由您决定，因此我不会详细解释以下代码的工作原理，但基本上我会根据值的范围调整它们的大小。我将 alpha、beta 和 gamma 的值分别转换为它们总范围的百分比，然后将其乘以我想要的条形最大宽度。
我从这里抓取范围:https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation
通用公式适用于 [a, b] 范围内的值和 max_w 的最大条宽，以及 的 alpha、beta 或 gamma 值值，计算出的条形宽度为:
width = max_w * ( ( -a + value )/(b - a) )
不要忘记在末尾添加“px”。
// Listen for device orientation event
window.ondeviceorientation = function(eventData)
{
let maxWidth = 200;
// Show alpha, beta and gamma values
document.getElementById('alpha').style.width = Math.round(maxWidth * eventData.alpha / 360) + "px";
document.getElementById('beta').style.width = Math.round(maxWidth * (180 + eventData.beta) / 360) + "px";
document.getElementById('gamma').style.width = Math.round(maxWidth * (90 + eventData.gamma) / 180) + "px";
}p span{
height : 30px;
display : inline-block;
}
#alpha{
background-color : green;
}
#beta {
background-color : yellow;
}
#gamma {
background-color : purple
}<p> Alpha: <span id="alpha"> </span> </p>
<p> Beta: <span id="beta"> </span> </p>
<p> Gamma: <span id="gamma"> </span></p>关于javascript - 在使用 JS 创 build 备方向的可视化表示方面需要一些帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48293524/
27
4
0
我正在尝试将 tslib 嵌入到 ARM 系统中，以便使用触摸屏设备；我已经成功安装了它，但不幸的是我无法检索所有笔记来再次安装它。 x) 我交叉编译了库文件，并将它们放入 /usr/lib ；我已经
我正在尝试开发 Linux 设备驱动程序，作为我的第一次尝试，我正在尝试开发具有以下文件选项的字符设备驱动程序， struct file_operations fops{ .open=open_fu
我们在 IoT Agent Ultralight 中发现了一个错误。 如果我们尝试向不存在的设备发送测量值，我们将收到 404 - DEVICE_NOT_FOUND 错误，但同时将在 IoTA 和 O
我有一个 d3dDevice: ComPtrd3dDevice; 我在这里将它用于 dxgiDevice: ComPtr dxgiDevice2; HRESULT hr; hr
我正在尝试开发 Linux 设备驱动程序，作为我的第一次尝试，我正在尝试开发具有以下文件选项的字符设备驱动程序， struct file_operations fops{ .open=open_fu
我在安装了 Xcode 4.5.1 的 Mt Lion 上运行。 默认情况下，当我构建并部署到 iOS 5.1 设备时，显示会在我旋转设备时旋转，但当我部署到 iOS 6 模拟器或运行 iOS 的 i
我在 Vagrantfile 中使用以下行创建了一个 hostonly 网络 config.vm.network :hostonly, "10.1.1.15" 我可以看到它设置了/etc/networ
我在 Vagrantfile 中使用以下行创建了一个 hostonly 网络 config.vm.network :hostonly, "10.1.1.15" 我可以看到它设置了/etc/networ
当我在应用程序中添加设备时，我想在 IoT 中心创建一个设备。 我正在寻找可用于执行操作的 REST 端点。或任何可用于执行此操作的 SDK。 最佳答案 查看以下文档: Service - Creat
我一生都无法使用 xcode 组织者“自动设备配置”中的“团队配置配置文件”在 xcode 4.0.1 中将我的应用程序构建到我的 iPad 上。 该应用程序完美地构建到模拟器，但当我构建到 iPad
我是一名优秀的程序员,十分优秀！