可旋转转盘:计算两个矢量之间的角度，每次移动参考线

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

如何让表盘在每次松开并重新单击时在同一位置启动？

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

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

Answer 1

我想出了以下解决方案：

通常，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">