Вращающийся поворотный круг: рассчитайте угол между двумя векторами, каждый раз перемещая опорную линию. - PullRequest
Новая
       64

Вращающийся поворотный круг: рассчитайте угол между двумя векторами, каждый раз перемещая опорную линию.

0 голосов
/ 26 февраля 2019

Я сделал приведенный ниже вращающийся диск, используя popmotion . 

const {
  listen,
  styler,
  pointer,
  value,
  transform,
  spring,
  inertia,
  calc
} = window.popmotion;
const { pipe } = transform;

const dial = document.querySelector(".dial");
const dialStyler = styler(dial);
const dialRotate = value(0, dialStyler.set('rotate'));

const dialRect = dial.getBoundingClientRect();
const dialY = dialRect.top + window.scrollY + (dialRect.height / 2);
const dialX = dialRect.left + window.scrollX + (dialRect.width / 2);
// console.log(dialX, dialY);

const pointA = {x: dialX, y: dialY};
// let pointB = {x: 0, y: 0};
// let angle = 0;
// let prevAngle = 90;
// Angle between origo and pointer
const pointerAngle = o => pointer( o ).pipe(v => {
  const pointB = {x: v.x, y: v.y};
  const angle = calc.angle(pointA, pointB) + 90;
  // console.log('pointA: ', pointA);
  // console.log('pointB: ', pointB);
  // console.log('angle: ', angle);
  // console.log('prevAngle: ', prevAngle);
  // console.log('angle - prevAngle: ', angle - prevAngle);
  return angle;
});

listen(dial, "mousedown touchstart").start(e => {
  e.preventDefault();
  // prevAngle = angle;
  pointerAngle().start(dialRotate);
});

listen(document, "mouseup touchend").start(() => {
  dialRotate.stop();
});
img {
  width: 200px;
}
<script src="https://unpkg.com/popmotion/dist/popmotion.global.min.js"></script>

<img class="dial" src="https://greensock.com/wp-content/uploads/custom/draggable/img/knob.png">

Как я могу заставить циферблат начинать в том же месте каждый раз, когда я отпускаю и повторно нажимаю?

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

Вероятно, это связано с тригонометрией, но я не смог выяснить это.

1 Ответ

0 голосов
/ 26 февраля 2019

Я придумал следующее решение:

Обычно atan2 (angle из popmotion в моем случае) вычисляет угол между двумя точками, предполагая, что горизонтальная ось х проходит черезпервая точка.Затем он вычисляет угол между осью X и вектором, проходящим через две точки.В конце концов, нет смысла говорить о угле между двумя точками , угол существует только между двумя векторами / линиями .

В нашем случае мы хотели, чтобы гипотетическая ось х перемещалась туда, куда мы щелкаем / касаемся, поэтому мы начинаем каждый раз под углом 0, прежде чем вращать циферблат.Тогда очевидным решением было вычислить два atan2, один от начала циферблата до точки, когда мы нажимаем первый раз, и один от начала циферблата до любой точки, к которой перемещается указатель / палец.Затем мы просто вычитаем первую остановку atan2 из той, которая движется.

Вышеуказанное гарантирует, что мы всегда начинаем под углом 0 градусов, когда указываем указатель / палец вниз.

Наконец, мы просто добавляем старый угол к новому, чтобы начать с того места, где мы остановились ранее.

Ниже приведен окончательный код.

PS: в качестве бонусаЯ добавил инерцию к циферблату, чтобы он продолжал вращаться с пониженной скоростью, пока не остановится, когда мы его отпустим: 

const {
  listen,
  styler,
  pointer,
  value,
  transform,
  spring,
  inertia,
  calc
} = window.popmotion;
const {
  pipe
} = transform;

const dial = document.querySelector(".dial");
const dialStyler = styler(dial);
const dialRotate = value(0, dialStyler.set('rotate'));

// Get origin of dial graphic
const dialRect = dial.getBoundingClientRect();
const dialY = dialRect.top + window.scrollY + (dialRect.height / 2);
const dialX = dialRect.left + window.scrollX + (dialRect.width / 2);

// Angle between origo and pointer
const pointA = {
  x: dialX,
  y: dialY
};
let startSet = false;
let startPoint = {
  x: 0,
  y: 0
};
let combinedAngle = 0;
let prevAngle = 0;

const pointerAngle = o => pointer(o).pipe(v => {
  // Capture exact coordinate click/touch event happens
  // Used to calculate angle from that point and to where pointer is dragged
  // Also, capture last rotate position, to add to new angle
  // Ensures angle starts from where it previously stopped (not from 0 degrees)
  if (!startSet) {
    startPoint = {
      x: v.x,
      y: v.y
    };
    prevAngle = dialRotate.get();
    startSet = true;
  }

  const startAngle = calc.angle(pointA, startPoint) + 90;
  const pointB = {
    x: v.x,
    y: v.y
  };
  const mainAngle = calc.angle(pointA, pointB) + 90;
  const newAngle = mainAngle - startAngle;

  combinedAngle = newAngle + prevAngle;
  return combinedAngle;
});

listen(dial, "mousedown touchstart").start(e => {
  e.preventDefault();
  pointerAngle().start(dialRotate);
});

listen(document, "mouseup touchend").start(() => {
  startSet = false;
  const angle = dialRotate.get();
  inertia({
    velocity: dialRotate.getVelocity(),
    power: 0.8,
    from: angle,
  }).start(dialRotate);
});
img {
  width: 200px;
}
<script src="https://unpkg.com/popmotion/dist/popmotion.global.min.js"></script>
<img class="dial" src="https://greensock.com/wp-content/uploads/custom/draggable/img/knob.png">
...