Как реализовать на js такую же крутилку, как и в photoshop, выводящую числовое значение от 0 до 360 в input?

Question

[scerscer]

Answer 1

[0xD34F]

HTML

<div class="angle">
  <div class="angle-input">
    <div class="angle-input-arrow"></div>
  </div>
  <input type="number" min="0" max="360" value="0">
</div>

CSS

.angle {
  display: inline-flex;
  align-items: center;
  border: 1px solid silver;
  padding: 5px;
}

.angle-input {
  display: inline-flex;
  justify-content: center;
  border: 1px solid black;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.angle-input-arrow {
  height: 50%;
  border: 1px solid black;
  transform-origin: 50% 100%;
  box-sizing: border-box;
  pointer-events: none;
}

JS

document.querySelector('.angle input').addEventListener('input', function(e) {
  const arrow = this.closest('.angle').querySelector('.angle-input-arrow');
  arrow.style.transform = `rotate(${e.target.value}deg)`;
});

const angleInput = document.querySelector('.angle-input');

angleInput.addEventListener('mousedown', onAngleInput);
angleInput.addEventListener('mousemove', onAngleInput);

function onAngleInput(e) {
  if (e.buttons === 1) {
    const {
      offsetX: x, offsetY: y,
      target: t,
      target: { offsetWidth: w, offsetHeight: h }
    } = e;

    const deg = (450 + (Math.atan2(y - h / 2, x - w / 2) * (180 / Math.PI) | 0)) % 360;
    t.querySelector('.angle-input-arrow').style = `transform: rotate(${deg}deg)`;
    t.closest('.angle').querySelector('input').value = deg;
  }
}

https://codepen.io/anon/pen/gVRgoX?editors=1010

Answer 2

[Сергей Сергей]

Math.atan для отношения х и у координат от центра, остальное стилизуется просто по справочнику.