Блог

Я создаю приложение с использованием JavaScript и jQuery, которое сообщит пользователю, является ли устройство прямым или нет, в основном, как уровень духа. Я хочу нарисовать прямую линию по середине экрана, и я хочу, чтобы она реагировала независимо от размера устройства. Это будет использоваться на мобильных телефонах и планшетах. Я использовал холст для рисования линии, и пока я не уверен, правильно ли это подойти к этому?

если кто-нибудь может дать мне какой-либо совет, я был бы очень признателен. Ниже приведена моя строка canvas. И я включил приблизительный рисунок того, что я имею в виду.

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

Если телефон выровнен по прямой, линия будет зеленой, иначе красной

чтобы нарисовать линию, вы можете использовать псевдоэлемент из 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> 

Хотя рисование линии с помощью canvas может работать, вам может показаться более простым нарисовать ее с помощью простого элемента div. Когда вы почувствуете наклон, вы можете изменить его цвет на красный и обратно на зеленый, если он ровный.

Конечно, вам придется выполнить некоторые вычисления, чтобы решить, под каким углом вы хотите, чтобы линия была — но я думаю, в этом весь смысл вашего веб-приложения, чтобы показать людям, насколько они далеки.

Когда вы знаете угол, который вы хотите, чтобы линия была наклонной, вызовите 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>
 

Вот фрагмент, где вы можете показать линию под разными углами.

 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>