这是一个创建于 275 天前的主题，其中的信息可能已经有所发展或是发生改变。
完整代码： https://codesandbox.io/p/sandbox/d8kjg2
最近自娱自乐时，写了一个类似高中物理的木板-滑块组件，可以根据木板的角度来控制小球的位置，见图： https://imgur.com/a/Eo2briC
组件有个问题，在旋转到 90 度附近时，值会突然从 0 跳到 100： https://imgur.com/a/kWmm3I4
我知道问题出在 handleMouseMove 函数里，斜率 k 在 90 度附近发生了跳变，但不会解决，求教
11 条回复 2025-01-09 18:59:51 +08:00
 | 1 MozzieW 275 天前 准确的说法是： 垂直后，继续往左右两边旋转的正负值导致的。 考虑到另外一点，放开后回归到水平的位置时数值要保留一致，就是 0 位置松开鼠标后还是 0 ，100 位置松开鼠标后还应该是 100 ，我认为这个算正常效果，不是 Bug 。 |
 | 2 yanxin1111 275 天前 90 度顺时针再旋转是 0 ，逆时针再旋转就是 100 我感觉逻辑没问题 |
 | 3 chairuosen 275 天前 好家伙，用这个滑块调整音量，人都要疯 1L 说得对，feature |
 | 4 lisianthus OP @MozzieW 其实这个也是斜率跳变导致的。rotate 角度从正跳到负，看起来 0 的位置没变，但实际上原先 0 的位置变成了 100 ，所以过渡动画看起来奇怪 |
 | 5 tutouguai 275 天前 不能过中线就重置为 100 得滑块重置下滑动作的时候才重置 value value 值一定要跟滑块重置进行绑定 |
 | 6 zivW 275 天前 现在这样旋转好像有点问题。 用 Math.atan2(dy , dx) 试试呢 > atan2 方法返回一个 -pi 到 pi 之间的数值，表示点 (x, y) 对应的偏移角度。这是一个逆时针角度，以弧度为单位 |
 | 7 lanced 275 天前 5L 说的对，旋转角度从正到负时 value 的值不更新，滑块重置时再去更新 Value |
 | 8 h1298841903 275 天前 你这个木板是不是要控制旋转角度啊？都能倒过来，这样也不知道，哪边是音量大，哪边是音量小。 |
 | 9 caocong 275 天前 把 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)`; |
| 10 caocong 275 天前  1 |
| 11 lisianthus OP @caocong 牛的，完美解决 |
Select Language