0

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

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

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

这可能与三角学有关，但我无法弄清楚。

4

1 回答 1

0

我想出了以下解决方案：

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

在我们的例子中，我们希望假设的 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">

于 2019-02-26T12:17:06.457 回答