javascript - Spinable turn dial : Calculate angle between two vectors, 每次移动引用线

Question

我使用 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">

每次松开并重新点击时，如何让表盘从同一位置开始？

它现在的工作方式是，在单击/触摸时移动到光标/手指位置。我希望它从它当前所在的确切位置开始，并从那里计算 Angular 。

这可能与三 Angular 学有关，但我一直没弄清楚。

Answer 1

我想出了以下解决方案:

通常，atan2(在我的例子中是 popmotion 中的 angle)通过假设水平 x 轴运行来计算两点之间的 Angular 通过第一点。然后它计算 x 轴和穿过两点的矢量之间的 Angular 。毕竟，谈论两个点之间的 Angular 是没有意义的， Angular 只存在于两个向量/线之间。 p>

在我们的例子中，我们希望假设的 x 轴移动到我们点击/触摸的任何地方，所以我们每次都从 0 Angular 开始，然后再旋转表盘。显而易见的解决方案是计算两个 atan2，一个从表盘的原点到我们第一次点击的点，一个从表盘的原点到我们指针的任何点/手指移动到。然后我们只需从移动的那个中减去第一个停止的 atan2。

以上内容将确保我们在放下指针/手指时始终以 0 度 Angular 开始。

最后，我们只需将旧 Angular 添加到新 Angular ，从我们之前停止的地方开始。

下面是最终代码。

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">