如果原点 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>
我有一个 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>