JavaFX 围绕中心旋转矩形?
JavaFX rotate rectangle about center?
我正在尝试围绕其中心旋转一个矩形。使用 GraphicsContext ie gc 将旋转绘制到 canvas。这是我的绘制代码。
gc.save();
gc.translate(center.x, center.y);
gc.rotate(this.angle);
gc.strokeRect(0,0, this.width, this.height);
gc.restore();
这会将矩形移动到其中心,然后围绕其左上角旋转矩形。我试着减去边长和宽度的一半,但这只会让它到处乱飞。我的数学很烂,也许这里有更好的人可以告诉我我做错了什么。
如果需要该信息,我还存储了矩形的所有四个点(角)。
谢谢,
乔
围绕指定点的旋转需要由平移变换和围绕原点的旋转组成,如下所示:
- 使用平移将旋转中心移动到原点。
- 绕原点旋转
- 对第一个翻译使用反向翻译
您的代码中缺少第三部分。
例子
@Override
public void start(Stage primaryStage) throws Exception {
Canvas canvas = new Canvas(400, 400);
double x = 50;
double y = 100;
double width = 100;
double height = 200;
GraphicsContext gc = canvas.getGraphicsContext2D();
double rotationCenterX = (x + width) / 2;
double rotationCenterY = (y + height) / 2;
gc.save();
gc.translate(rotationCenterX, rotationCenterY);
gc.rotate(45);
gc.translate(-rotationCenterX, -rotationCenterY);
gc.fillRect(0, 0, width, height);
gc.restore();
Scene scene = new Scene(new Group(canvas));
primaryStage.setScene(scene);
primaryStage.show();
}
您也可以简单地使用具有指定枢轴的 Rotate
来实现所需的效果:
@Override
public void start(Stage primaryStage) throws Exception {
Canvas canvas = new Canvas(400, 400);
double x = 50;
double y = 100;
double width = 100;
double height = 200;
GraphicsContext gc = canvas.getGraphicsContext2D();
double rotationCenterX = (x + width) / 2;
double rotationCenterY = (y + height) / 2;
gc.save();
gc.transform(new Affine(new Rotate(45, rotationCenterX, rotationCenterY)));
gc.fillRect(0, 0, width, height);
gc.restore();
Scene scene = new Scene(new Group(canvas));
primaryStage.setScene(scene);
primaryStage.show();
}
就是这么简单,如下图。
Rectangle rect = new Reactangle(20, 20, 100, 50);
rect.setRotate(30); //rotate the rectangle around its center by 30 degrees.
我正在尝试围绕其中心旋转一个矩形。使用 GraphicsContext ie gc 将旋转绘制到 canvas。这是我的绘制代码。
gc.save();
gc.translate(center.x, center.y);
gc.rotate(this.angle);
gc.strokeRect(0,0, this.width, this.height);
gc.restore();
这会将矩形移动到其中心,然后围绕其左上角旋转矩形。我试着减去边长和宽度的一半,但这只会让它到处乱飞。我的数学很烂,也许这里有更好的人可以告诉我我做错了什么。
如果需要该信息,我还存储了矩形的所有四个点(角)。
谢谢, 乔
围绕指定点的旋转需要由平移变换和围绕原点的旋转组成,如下所示:
- 使用平移将旋转中心移动到原点。
- 绕原点旋转
- 对第一个翻译使用反向翻译
您的代码中缺少第三部分。
例子
@Override
public void start(Stage primaryStage) throws Exception {
Canvas canvas = new Canvas(400, 400);
double x = 50;
double y = 100;
double width = 100;
double height = 200;
GraphicsContext gc = canvas.getGraphicsContext2D();
double rotationCenterX = (x + width) / 2;
double rotationCenterY = (y + height) / 2;
gc.save();
gc.translate(rotationCenterX, rotationCenterY);
gc.rotate(45);
gc.translate(-rotationCenterX, -rotationCenterY);
gc.fillRect(0, 0, width, height);
gc.restore();
Scene scene = new Scene(new Group(canvas));
primaryStage.setScene(scene);
primaryStage.show();
}
您也可以简单地使用具有指定枢轴的 Rotate
来实现所需的效果:
@Override
public void start(Stage primaryStage) throws Exception {
Canvas canvas = new Canvas(400, 400);
double x = 50;
double y = 100;
double width = 100;
double height = 200;
GraphicsContext gc = canvas.getGraphicsContext2D();
double rotationCenterX = (x + width) / 2;
double rotationCenterY = (y + height) / 2;
gc.save();
gc.transform(new Affine(new Rotate(45, rotationCenterX, rotationCenterY)));
gc.fillRect(0, 0, width, height);
gc.restore();
Scene scene = new Scene(new Group(canvas));
primaryStage.setScene(scene);
primaryStage.show();
}
就是这么简单,如下图。
Rectangle rect = new Reactangle(20, 20, 100, 50);
rect.setRotate(30); //rotate the rectangle around its center by 30 degrees.