使用画布或 html、css 跨越任何设备并位于中心

Posted 2023-03-25

【中文标题】使用画布或 html、css 跨越任何设备并位于中心

【英文标题】：Line across any device and in the centre, using canvas or html,css

【发布时间】：2021-03-09 10:51:49

【问题描述】：

我正在使用 javascript 和 JQuery 制作一个应用程序，它会告诉用户设备是否是直的，基本上就像一个水平仪。我想在屏幕中间画一条直线，并且无论设备的大小如何，我都希望它能够响应。这将用于手机和平板电脑。我用画布画了一条线，到目前为止我不确定这是否是解决这个问题的正确方法？

如果有人能给我任何建议，我将不胜感激。到目前为止，下面是我的画布线。我已经包含了一些我的意思的粗略图。

const c = document.getElementById("LineCanvas");
const drw = c.getContext("2d");
drw.beginPath();
drw.moveTo(10,45);
drw.lineTo(180,47);
drw.lineWidth = 5;
drw.strokeStyle = '#006400';
drw.stroke();

If the phone is aligned straight the line will be green else red

【参考方案1】：

要绘制线条，您可以使用html 或body 中的伪元素或您想在特定页面中使用的任何特定标签或单击 ，然后通过transform:rotate() ; 或rotate3D() 更新旋转

示例（没有 javascript，必须通过您的应用从您的设备获取旋转值）：

let level = document.querySelector("#level");
document.querySelector("#spirit").onclick = function() 
  level.classList.toggle('show');

#level 
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  pointer-events: none;


#level.show 
  display: block;


#level::before 
  content: '';
  position: absolute;
  width: 200vmax;
  margin: 0 -50vmax;
  border-top: 1px solid;
  box-shadow: 0 0 1px 5px #bee;
  top: 50%;
  transform: rotate(0deg);


#level.show~#spirit::before 
  content: 'Hide';


#level:not(.show)~#spirit::before 
  content: 'Show';



/* animation to fake phone device moving */

#level::before 
  animation: rt 10s infinite;


@keyframes rt 
  20% 
    transform: rotate3d(1, -1, 1, -0.25turn);
  
  40% 
    transform: rotate3d(1, 1, 1, 0.5turn);
  
  60% 
    transform: rotate3d(1, -1, 1, -0.75turn);
  
  80% 
    transform: rotate3d(1, 1, -1, -0.5turn);
  

<div id="level">
  <!-- to show on a single page or via js on user request -->
</div>
<button id="spirit" type=button> that spirit level</button>

【讨论】：

谢谢。我现在就试一试。

太好了，我刚试过。但问题是，这现在显示在每一页上。如果有意义的话，我在用户进入关卡部分之前有一个主页。

我只希望在用户选择使用“精神级别”时显示此内容，然后将他们带到将使用此行的另一个页面

@ChristianKasongo 我把它变成了固定容器，您可以将其插入单个页面或切换显示/隐藏。

添加了一个切换按钮作为示例；）

【参考方案2】：

虽然可以使用画布绘制线条，但您可能会发现使用简单的 div 元素绘制线条更直接。当您感觉到斜坡时，您可以将其颜色更改为红色，如果它是水平的，则返回绿色。

当然，你必须做一些计算来决定你想要的线的角度——但我想这就是你的 web 应用程序向人们展示他们有多远的重点。

当你知道你想要直线的角度时，调用slope(n)，其中n是度数。我还添加了一个简单的按钮，以便用户可以选择是否显示该行，但我希望您有自己的代码。

在您希望用户能够显示该行的任何页面上，将其放在头部：

<style>
* 
  margin: 0;
  padding: 0;
  
.linecontainer 
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 99999;
 
#line 
  width: 200vmax;
  height: 5px;
  position: relative;
  top: 50%;
  left: calc(50vw - 100vmax);
  transform: rotate(45deg);
  background-color:red;


.hideline 
  display: none;
  
  
#showbtn 
  font-size: 20px;
  background-color: blue;
  color: white;
  height: 2em;
  width: auto;
  padding: 2px;


</style>

并将其放在页面的主体中：

<div class="linecontainer">
  <div id="showbtn" onclick="document.getElementById('line').classList.toggle('hideline');">
    Click me to show/hide the line
  </div>
  <div id="line"></div>
</div>

<script>
function slope(deg) 
    let line = document.getElementById('line');
    line.style.backgroundColor = ( deg%180 == 0 ) ? 'green' : 'red';
    line.style.transform = 'rotate(' + deg + 'deg)';

</script>

这是一个 sn-p，您可以在其中以不同的角度显示线条。

function slope(deg) 
    let line = document.getElementById('line');
    line.style.backgroundColor = ( deg%180 == 0 ) ? 'green' : 'red';
    line.style.transform = 'rotate(' + deg + 'deg)';

* 
  margin: 0;
  padding: 0;
  
.linecontainer 
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 99999;
 
#line 
  width: 200vmax;
  height: 5px;
  position: relative;
  top: 50%;
  left: calc(50vw - 100vmax);
  transform: rotate(45deg);
  background-color:red;


.hideline 
  display: none;
  
  
#showbtn 
  font-size: 20px;
  background-color: blue;
  color: white;
  height: 2em;
  width: auto;
  padding: 2px;

<div class="linecontainer">
  <div id="showbtn" onclick="document.getElementById('line').classList.toggle('hideline');">
    Click me to show/hide the line
  </div>
  <div id="line"></div>
</div>

<!-- this is just for the demo -->
<div style="background-#eeeeee;font-size: 20px;position:fixed;z-index:100000;bottom:0;left:0;">How many degrees do you want me to rotate? <input style="font-size:20px;"value="45" onchange="slope(this.value);"/></div>

【讨论】：

非常感谢您抽出宝贵时间帮助我！这太棒了！.. 非常感谢。