写的 React 组件有 bug，知道原因但不会解决，求教

[lisianthus]

完整代码： https://codesandbox.io/p/sandbox/d8kjg2

最近自娱自乐时，写了一个类似高中物理的木板-滑块组件，可以根据木板的角度来控制小球的位置，见图： https://imgur.com/a/Eo2briC

组件有个问题，在旋转到 90 度附近时，值会突然从 0 跳到 100： https://imgur.com/a/kWmm3I4

我知道问题出在 handleMouseMove 函数里，斜率 k 在 90 度附近发生了跳变，但不会解决，求教

[MozzieW]

准确的说法是： 垂直后，继续往左右两边旋转的正负值导致的。
考虑到另外一点，放开后回归到水平的位置时数值要保留一致，就是 0 位置松开鼠标后还是 0 ，100 位置松开鼠标后还应该是 100 ，我认为这个算正常效果，不是 Bug 。

[yanxin1111]

90 度顺时针再旋转是 0 ，逆时针再旋转就是 100
我感觉逻辑没问题

[chairuosen]

好家伙，用这个滑块调整音量，人都要疯
1L 说得对，feature

[lisianthus]

@MozzieW 其实这个也是斜率跳变导致的。rotate 角度从正跳到负，看起来 0 的位置没变，但实际上原先 0 的位置变成了 100 ，所以过渡动画看起来奇怪

[tutouguai]

不能过中线就重置为 100 得滑块重置下滑动作的时候才重置 value value 值一定要跟滑块重置进行绑定

[zivW]

现在这样旋转好像有点问题。 用 Math.atan2(dy , dx) 试试呢

> atan2 方法返回一个 -pi 到 pi 之间的数值，表示点 (x, y) 对应的偏移角度。这是一个逆时针角度，以弧度为单位

[lanced]

5L 说的对，旋转角度从正到负时 value 的值不更新，滑块重置时再去更新 Value

[h1298841903]

你这个木板是不是要控制旋转角度啊？都能倒过来，这样也不知道，哪边是音量大，哪边是音量小。

[caocong]

把 op 的稍微改了一下 https://codesandbox.io/p/sandbox/d8kjg2

mousedown 的时候加个变量判断是从前半开始拖动还是后半开始拖动：

const { x } = centerPointRef.current;
isEnd = evt.clientX - x > 0;

mouseover 里判断是否拖动到反向位置，如果反向了加 180 度：

const isReverse =
(isEnd && evt.clientX - x < 0) || (!isEnd && evt.clientX - x > 0);
const deg = Math.atan(k) + (isReverse ? Math.PI : 0);

slopeRef.current = isReverse ? -k : k;
el.style.transform = `rotate(${deg}rad)`;

[caocong]

https://codesandbox.io/p/sandbox/charming-bessie-forked-hwt63v?workspaceId=ws_6nEzjZ5J4NqTT8mjzhKggj

fork 地址发错了

[lisianthus]

@caocong 牛的，完美解决