对象旋转技术问询：如何基于最后弧度值启动旋转？

核心问题分析 #

当前代码计算角度增量时，仅基于鼠标初始位置和当前位置的角度差，完全没考虑图像已有的旋转角度，导致每次拖动旋转都会从0弧度开始，覆盖之前的旋转状态。

具体修改步骤 #

1. 添加状态变量保存旋转相关状态

在组件类里新增三个变量，分别记录当前旋转角度、拖动开始时的初始旋转角度和初始鼠标角度：

private currentRotation: number = 0; // 图像当前的旋转弧度
private startRotation: number = 0;    // 拖动开始时的初始旋转弧度
private startMouseAngle: number = 0;  // 拖动开始时鼠标相对于中心的角度

2. 补充拖动开始的初始化逻辑

添加拖动开始的处理方法（比如鼠标按下触发旋转时调用），记录初始状态：

private initDragStart(): void {
    this.isDragging = true;
    const extent = this.object.getExtent();
    const cursor = this.getCursorCoordinates();
    
    if (!extent || !cursor) return;
    
    const center = getCenter(extent);
    this.startRotation = this.currentRotation; // 保存当前已有的旋转角度
    this.startMouseAngle = getAngle(center, cursor); // 记录初始鼠标角度
    this.startCoordinate = cursor; // 确保startCoordinate是当前鼠标位置
}

3. 修改angleDelta的计算逻辑

现在计算角度增量时，基于初始旋转角度和鼠标角度变化，同时处理角度环绕问题（比如从350度转到10度时，增量应为20度而非-340度）：

private get angleDelta(): number {
    if (!this.isDragging) {
        return 0;
    }

    const extent = this.object.getExtent();
    const cursor = this.getCursorCoordinates();

    if (!extent || !cursor) {
        return 0;
    }

    const center = getCenter(extent);
    const currentMouseAngle = getAngle(center, cursor);
    
    // 计算鼠标拖动产生的角度变化
    let delta = currentMouseAngle - this.startMouseAngle;
    // 归一化角度差到[-π, π]范围，避免环绕时出现异常大的增量
    delta = Math.atan2(Math.sin(delta), Math.cos(delta));
    
    // 更新当前旋转角度（若外部逻辑是用delta累加，这一步也可放到外部处理）
    this.currentRotation = this.startRotation + delta;
    
    // 返回增量，供外部更新图像旋转使用
    return delta;
}

4. 同步状态与图像实际旋转

如果有其他方式修改图像旋转（比如按钮设置），要同步更新currentRotation的值，保证状态一致。

关键逻辑说明 #

• 拖动开始时保存已有旋转角度和初始鼠标角度，让后续增量计算基于已有旋转展开。
• 用Math.atan2(Math.sin(delta), Math.cos(delta))归一化角度差，解决角度环绕时的异常值问题，保证旋转流畅。
• currentRotation始终与图像实际旋转角度同步，确保每次拖动都从上次结束的位置开始。

内容的提问来源于stack exchange，提问作者YoungGeralt