Формула нахождения угла у края страницы работает странно

166
09 января 2019, 00:30

Решил сделать что-то простенькое типа, когда двигается мышка меняется угол поворота у квадрата. Потом добавил, когда зажимаешь мышь он увеличивается в размерах, так же поворачивается. И в этом режиме, когда уводишь мышку в самый левый или правый край, формула вычисления угла начинает работать странно(попробуйте так сделать, поймете). Как устранить проблему?

Так же плюсом было бы рассказать, как работают формула нахождения угла и объяснить почему, когда умножаешь переменную dist (в том режиме увеличения размеров) на корень из двух, формула начинает работать нормально(уберете строчку, поймете).

код: 

<html> 
  <head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<style> 
		:root { 
			--rotate:0rad; 
			--h: 200px; 
		} 
		body { 
			margin: 0; 
		} 
		.outer { 
			display: flex; 
			height: 100vh; 
			max-height: 100vh; 
			overflow:hidden; 
			width: 100%; 
		} 
		.div { 
			text-align: center; 
			margin: auto; 
			height: var(--h); 
			width: var(--h); 
			background-color: grey; 
			transform: rotate(var(--rotate)); 
		} 
		.div p { 
			color: #fff; 
			margin-top: 0; 
			font:30px Sans-serif; 
		} 
		.div p::after { 
			content: 'eE' 
		} 
	</style> 
</head> 
<body> 
	<div class="outer"> 
		<div class="div"><p></p></div> 
		<script> 
 
			w = window.innerWidth, 
			h = window.innerHeight; 
			var f = Math.sqrt(2) 
 
		function checkDist(x1,y1,x2,y2) { 
			return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) 
		} 
		 
			var div = document.querySelector('.div') 
			var divH = div.scrollHeight 
			var divHover = false 
			var PI = Math.PI 
			 
			div.onmouseover = e=>{ 
				divHover=true 
			} 
			div.onmouseout = ()=>{divHover=false} 
			document.addEventListener('mousedown', e=>{ 
					document.onmousemove = e=>{ 
   		rads = Math.atan2(e.y-h/2, e.x-w/2)+PI/2+PI/4 
 
					dist = checkDist(e.x,e.y,w/2,h/2)*f+f 
						 
					degs = Math.round(180/PI*rads); 
 
					document.querySelector(':root').style.setProperty('--rotate', degs+'deg') 
					document.querySelector(':root').style.setProperty('--h', dist+'px') 
					} 
			}) 
			document.addEventListener('mouseup', ()=>{document.onmousemove = undefined}) 
 
			document.addEventListener('mousemove', e=>{ 
 
				if(!divHover) { 
					rads = Math.atan2(e.y-h/2, e.x-w/2)+PI/2 
					degs = Math.round(180/PI*rads); 
					 
 
					document.querySelector(':root').style.setProperty('--rotate', degs+'deg') 
					//document.body.style.setProperty('--rotate', rads+'rad') 
				} 
			}) 
		</script> 
	</div> 
 
</body> 
</html>

Answer 1

Формула вычисления угла работает правильно.

А вот центр рисуемого квадрата при превышении размера смещается вниз, а не остаётся в центре окна рисования

Расстояние от центра до мышки есть половинка диагонали квадрата, а для получения стороны квадрата нужно её умножить на корень из двойки - это правильно.

READ ALSO
Доступ к элементам в wordpress
javascript

Доступ к элементам в wordpress

В футер был добавлен следующий код для попапа:

 142
Как отправить post запрос с данными?
javascript

Как отправить post запрос с данными?

Отправляю изображение на api сервиса:

 174
Как в vuex вывести данные реактивно через store в разные шаблоны
javascript

Как в vuex вывести данные реактивно через store в разные шаблоны

Не могу разбросаться как выводить значения при заполнение Input в одном компоненте через store Для вывода в другом, сейчас сделал через computed, всё...

 179
Изменить стили в активном блоке
javascript

Изменить стили в активном блоке

Есть несколько блоков с товарами, по клику на блок нужно изменить стили дочерних элементов (уsizes-block,

 155