旋转圆向矢量（JS）

Question

我可能会急剧思考这个问题。但是我有一个用pi切片动态生成的圆圈。我希望能够单击圆并旋转它。我单击的圆上的任何点，我想跟随鼠标的那个点。

我已经玩了一段时间了。我可以让它在圆圈的一侧工作。但是圆圈的另一侧与我期望的相反。这基本上是设置

        const currentDegrees = piCircle.current;
        const rect = canvas.getBoundingClientRect();
        const x = state.xy[0] - rect.left;
        const y = state.xy[1] - rect.top;
        
        const dx = state.delta[0];
        const dy = state.delta[1];

X和Y是圆圈上的鼠标位置，DX和DY是鼠标正在移动的归一化运动（通常为1/0/-1）。电流定位是圆的当前旋转。

我目前有些工作的方法是这种
const degrees = todegrees（Math.atan2（y + dy，x + dx））;

该方法似乎并不尊重圆的旋转。在圆的右侧它可以正常工作，在左侧，运动是倒置的。

为了简化这个问题，我意识到我可以更像这样。我有两个向量，鼠标位置（x＆amp; y）和delta（x＆amp; y）。通过将这两个添加在一起，我将有一个第三个向量，这是我希望在施加一定程度的旋转时最终位置的目的地。

    const x = state.xy[0] - rect.left;
    const y = state.xy[1] - rect.top;
    const dx = x + state.delta[0];
    const dy = y + state.delta[1];

我也很糟糕地帮助可视化我的问题

Answer 1

这是我如何做到这一点的最佳猜测。它不是完美的。圆旋转比指针稍慢。我不确定如何改进它。我愿意接受建议。

        const x = state.xy[0] - rect.left;
        const y = state.xy[1] - rect.top;
        
        const dx = x + state.delta[0];
        const dy = y + state.delta[1];

        const startAngle = Math.atan2(y - centerY , x - centerX);
        const endAngle = Math.atan2(dy - centerY, dx - centerX)

        const cx = centerX + radius * Math.cos(startAngle);
        const cy = centerY + radius * Math.sin(startAngle);

        const dcx = centerX + radius * Math.cos(endAngle);
        const dcy = centerY + radius * Math.sin(endAngle);

        const rsa = Math.atan2(centerY - dcy, centerX - dcx);
        const rea = Math.atan2(centerY - cy, centerX - cx);

        const angle = toDegrees(rsa - rea)