Javascript 基于旋转计算新的X和Y

我正在创建一个图形编辑器，您可以在其中选择元素、缩放它们、旋转、调整大小等。 我一直坚持的一件事是在元素旋转后定位它。我有以下处理大小调整的javascript类：

const rotateCoords = (x, y, rotation) => {
    const rad = (rotation * Math.PI) / 180
    return {
        y: y * Math.cos(rad) - x * Math.sin(rad),
        x: x * Math.cos(rad) + y * Math.sin(rad),
    }
}

export default (
    e,
    ratio,
    resizeDirection,
    resizeMouseX,
    resizeMouseY,
    zoomScale,
    rotation
) => {
    let resizeMouseX = e.pageX - resizeMouseX
    let resizeMouseY = e.pageY - resizeMouseY

    const newResize = rotateCoords(resizeX, resizeY, rotation)
    resizeX = newResize.x
    resizeY = newResize.y

    let x = 0,
        y = 0,
        width = 0,
        height = 0

    if (resizeDirection === 'r') {
        width = resizeX
    }

    if (resizeDirection === 'l') {
        x = resizeX
        width = -resizeX
    }

    if (resizeDirection === 't') {
        y = resizeY
        height = -resizeY
    }

    if (resizeDirection === 'b') {
        height = resizeY
    }

    if (resizeDirection === 'tr') {
        width = resizeX * ratio
        height = resizeX
        y = -resizeX
    }

    if (resizeDirection === 'br') {
        width = resizeX * ratio
        height = resizeX
    }

    if (resizeDirection === 'bl') {
        width = -resizeX * ratio
        height = -resizeX
        x = resizeX * ratio
    }

    if (resizeDirection === 'tl') {
        width = -resizeX * ratio
        height = -resizeX
        x = resizeX * ratio
        y = resizeX
    }

    return {
        x: x / zoomScale,
        y: y / zoomScale,
        width: width / zoomScale,
        height: height / zoomScale,
    }
}

---

不同的条件根据拖动的锚点（左下角、右上角等）调整元素容器的大小。它们将根据拖动的锚点返回类似（x:-2，y:1）或（宽度：-2，高度：0）的值。当元素旋转为0时，此操作效果良好。但是，当元素旋转时（例如

transform:rotate（30度））

，x和y失去正常，元素开始根据旋转角度在不同方向上浮动。我假设我需要对返回的x和y进行一些计算，以使其保持在原位。谁能帮我解决这个问题，我将不胜感激！

听起来你需要更彻底地保持跟踪局部和全局坐标。通常旋转时，减去对象的中心，旋转，然后再次添加中心。旋转效果很好。但是，当使用css应用旋转时，对象的X轴和Y轴也会旋转。因此，现在，更改X轴和Y轴会将其移动到旋转轴上，而不是全局轴上一个。使用统一变换矩阵请参见2D，您只需要3x3矩阵…要围绕中心旋转，您需要将中心平移为（0,0）旋转，然后再平移回…注意局部变换和全局变换之间的差异（在上一链接中有详细介绍）…请参阅：有关GUI编辑器的代码体系结构的一些启示