0

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

Так же плюсом было бы рассказать, как работают формула нахождения угла и объяснить почему, когда умножаешь переменную 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>

1 ответ 1

1

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

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

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

6
  • А почему? И как тогда узнать на какое расстояние он смещается, чтобы можно было потом прописать: transform: translate(...)? 22 сен 2018 в 9:49
  • А где задаётся его положение и преобразование? Я так понимаю, это элемент div с цветом gray - но как именно модифицируется преобразование?
    – MBo
    22 сен 2018 в 9:50
  • Да это серый див. Я написал ему margin: auto, то есть в центре(положение). А преобразование нахожу аркгангенс мыши и центра(поворот), создал функцию чекдист, которая возвращает дистанцию, но почему дистанция не правильно вычисляется, и приходится умножать на корень из двух(высота, ширина). И все значения сохраняются в css переменную. Все преобразования в теге скрипт. 22 сен 2018 в 9:58
  • Про дистанцию написал. Про смещение - мне неясно, относительно чего производится вращение - т.е. явные вычисления делаются относительно w/2, h/2, а скрытые - не знаю.
    – MBo
    22 сен 2018 в 10:07
  • Да, спасибо, что объяснил про дистанцию. Не знаю влияет ли это как-то на поворот(скорее всего не влияет), но после 315 градусов, градусы идут в минус, то есть -45 и т.д до 0 .... Кстати так и не понял, что за скрытые вычисления? 22 сен 2018 в 10:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.