个人中心
文章发布
退出
作者热门文章
- android - AmazonSNS - AwsCredentials.properties - NullPointerException
- android - ListView invalidate() 与 invalidateViews() 之间的区别？
- android - 获取上下文的问题
- Android M 权限模型
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
我发现运行良好的代码片段可以轻松创建模块化 Delphi 应用程序。此代码适用于 Delphi 5 版本。 链接到片段 -> http://delphi.cjcsoft.net/viewthread.
我正在通过下面的代码以编程方式创建搜索索引。问题是插入设计文档后如何建立索引？或者它是第一次由 .search() 方法使用构建？ var book_indexer = function(doc) {
我有一个非常小的项目，我想创建一个设置表单。做这个的最好方式是什么？简单地创建另一个带有复选框/文本框的 Windows 窗体并使用 Properties.Settings 类保存这些设置？它可能会起
我试图通过引用已经存在的 dm-linear、dm-snapshot、dm-cache 等来实现设备映射器目标。在我的实现中，我需要对某个扇区范围执行读/修改/写操作。由于设备映射器直接与块层对话，我
现在我有了一些空闲时间，我决定创建一个 Java 程序来将我的 XBee(即 zigbee)芯片连接到我的新 SmartThings 集线器。我找到了一个很好的教程，通过手动创建数据包来完成此操作(
我有一系列这种形式的静态实用方法: StringBuffer Util.doA(String arg0, String arg1, SomeEnum e); StringBuffer Util.do
我有一个 d3dDevice: ComPtrd3dDevice; 我在这里将它用于 dxgiDevice: ComPtr dxgiDevice2; HRESULT hr; hr
如何仅使用 css(样式)为我的 react-native View 组件背景创建此设计？ 我希望 View 2 具有绿色背景，顶部有一条小曲线，与右上角的中心相交。 仅使用 borderRadius
我正在尝试创建一个有点动态的 html 类，它根据类末尾包含的数字设置宽度 %。注意:类名将始终以“gallery-item-”开头 示例:div.gallery-item-20 = 20% 宽度 我
基本上，我想要创 build 备方向值 alpha、beta 和 gamma 的可视化表示。到目前为止，我已经设法使用 innerHTML 以纯文本形式显示值，但我想为每个值创建一系列“条形图”。我根
我想用 Java 创 build 计二维码。 设计二维码可能包含图形形式的 Logo 。下面是此类设计代码的示例。 如何创建这样的二维码？ 最佳答案 我刚刚找到了一个可以创建此类 QR 码的软件。 T
据我了解，SyncResponse 的有效负载是一个 Device 类型的数组。 我的问题是我无法创建在 SyncResponse - Payload - Device 内部定义的设备类型实例(无权访
我现在正在考虑如何创建类似以下事实的 android 应用程序... 起始页是 gridview，显示的列数将基于在设备屏幕分辨率上 当我点击 gridview 上的一项时，以下屏幕将根据设备分辨率显
我正在开发设备 onwer 应用程序，其中我必须使用 NFC 作为设备所有者安装我的应用程序，但是当我触摸两个设备并尝试安装应用程序时出现错误“由于校验和错误无法安装管理应用程序” 请告诉我哪里做错了
如何在不使用 mknod 或 MAKEDEV 的情况下(即通过使用动态注册)创 build 备文件。 最佳答案 假设你想在插入时动态分配一个主设备号给一个字符设备，使用: int alloc_chrd
我正在使用 .NET 为 IE 开发工具栏。目前，我使用 gacutil 插入我的 .NET 程序集，并使用 regasm 注册我的 COM 程序集。 我想为项目创建一个设置 (MSI)，但我似乎无法
在为设置页面创建 Activity 后，我注意到 if (mCurrentValue !== value) 中的 mCurrentValue !== value 返回警告: Identity equa
我正在为用 C# 开发的软件开发设置表单。我正在研究不同的软件如何实现它们的设置表单。 在我遇到的大多数情况下，他们似乎在表单的左 Pane 中使用 Treeview，在右 Pane 中使用配置设置。
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 4 年前。 Improv
我正在尝试从 NodeJS 后端创建文档 ( https://firebase.google.com/docs/cloud-messaging/js/device-group ) 中所述的设备组，但我
我是一名优秀的程序员,十分优秀！