如果原点 X 为正且 Z 为负,如何找到矩形的角点?

How do I find corner of reactangle if the origin X is Positive and Z is Negative?

我有一个 3D 世界,并且有这样的平面坐标。 Coord x, -y .如何确定每个角的 (x,y) 坐标。我已经观察并进行了一些研究,我得到了这个公式: Formula 然而这并没有得到我想要的结果。

function rotating(cx, cy, x, y, angle) {
const radians = (Math.PI / 180) * angle;
const cos = Math.cos(radians);
const sin = Math.sin(radians);
const newX = (x - cx) * cos - (y - cy) * sin + cx;
const newY = (y - cy) * cos + (x - cx) * sin + cy;
return [newX, newY];
}
const P1 = rotating(10, -10, 8, -12, 90);

希望结果是 (8, -8) 但结果是 (12, -12)

结果将是 (12,-12),因为您的 y 轴是倒转的,因此从这个角度来看,正向旋转将是顺时针方向的。 2D 中的正旋转总是从正 x 轴到正 y 轴。 维基百科关于旋转矩阵的文章很好地解释了这一点 https://en.wikipedia.org/wiki/Rotation_matrix

这是您图片的修改版本。我移动了红色方块以匹配您的 y 标签。

我有一些空闲时间并使用库 math.js 将您的函数转换为使用矩阵乘法。使用矩阵运算可以更轻松地对多个坐标执行相同的操作。您可以修改此函数以使用您需要的其他转换矩阵。这里有一些例子https://en.wikipedia.org/wiki/Transformation_matrix

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Matrix operations</title>
    <!-- math.js library for matrix operations -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/9.4.3/math.js"></script>
</head>
<body>

    <script>

        function localRotation(x, y, xc, yc, angle) {
            // Create a matrix where each row is a dimension
            // First row is x, second is y, and last is z (filled with ones to allow for translation with matrix multiplication)
            var coordinates = math.matrix([
                x, // x values
                y, // y values
                math.ones(x.length) // "Homogenous coordinates addition"
            ]);

            // Matrix for rotating
            const radians = (Math.PI / 180) * angle;
            const rotate = math.matrix([
                [Math.cos(radians), -Math.sin(radians), 0],
                [Math.sin(radians), Math.cos(radians),  0],
                [0,                 0,                  1]
            ]);

            // Matrix for translating the square to the origin
            const translateToOrigin = math.matrix([
                [1, 0, -xc],
                [0, 1, -yc],
                [0, 0,   1],
            ]);      

            // Matrix for translating the square back to its original position
            const translateToOriginalPos = math.matrix([
                [1, 0, xc],
                [0, 1, yc],
                [0, 0,  1],
            ]);  

            // Combine all transformations into one matrix
            // The operations are in order from left to right!
            // First translate square to origin, then rotate, then translate back to original position
            const allTransformations = math.multiply(translateToOriginalPos, rotate, translateToOrigin);

            // Apply the transformation matrix
            coordinates = math.multiply(allTransformations, coordinates);
            // Here you should also divide each coordinate by the last row, but I didn't find an elegant way of doing it
            // It's not necessary, I think, when you only translate and rotate

            // Extract the x and y coordinates and return them
            const xCoordinates = coordinates._data[0];
            const yCoordinates = coordinates._data[1];
            return [xCoordinates, yCoordinates];
        }

        const squareVerticesXPos = [  8,  12, 12,  8]; // x coordinates
        const squareVerticesYPos = [-12, -12, -8, -8]; // y coordinates
        const squareOriginX = 10; // x, y, z (homogenous coordinate)
        const squareOriginY = -10; // x, y, z (homogenous coordinate)
        const angle = 90;

        const newCoordinates = localRotation(squareVerticesXPos, squareVerticesYPos, squareOriginX, squareOriginY, angle);
        
        console.log("Starting coordinates (x,y)");
        console.log(math.transpose([squareVerticesXPos, squareVerticesYPos]));
        
        console.log("Coordinates (x,y) after transforming");
        console.log(math.transpose(newCoordinates));
    </script>

</body>
</html>