如何在 JavaFX Canvas 中同步多个图像的旋转

Question

我有多个要一起旋转绘制的对象。当它们在 0 度时（正对），它们是好的，但当它们不是时，它看起来像这样：

我正在使用此代码进行旋转：

private void rotate(GraphicsContext gc, double angle, double px, double py) {
    Rotate r = new Rotate(angle, px, py);
    gc.setTransform(r.getMxx(), r.getMyx(), r.getMxy(), r.getMyy(), r.getTx(), r.getTy());
}

private void drawRotatedImage(GraphicsContext gc, Image image, double angle, double tlpx, double tlpy) {
    gc.save(); // saves the current state on stack, including the current transform
    rotate(gc, angle, tlpx + image.getWidth() / 2, tlpy + image.getHeight() / 2);
    gc.drawImage(image, tlpx, tlpy);
    gc.restore(); // back to original state (before rotation)
}

我有一组图像，我使用一个统一的角度调用drawRotatedImage 来旋转它们。所有图片都是32 x 32。 如何解决图像中的这种变化？

Answer 1

要将图像作为一组旋转，只需对所有这些图像使用相同的转换：

代替

gc.save();
gc.setTransform(new Affine(new Rotate(angle, image1CenterX, image1CenterY)));
gc.drawImage(image1, image1X, image1Y);
gc.restore();

gc.save();
gc.setTransform(new Affine(new Rotate(angle, image2CenterX, image2CenterY)));
gc.drawImage(image2, image2X, image2Y);
gc.restore();

...

（这就是你正在做的，如果你为每张图片调用drawRotatedImage）

使用

gc.save();
gc.setTransform((new Affine(new Rotate(angle, rotationCenterX, rotationCenterY)));

gc.drawImage(image1, image1unrotatedX, image1unrotatedY);
gc.drawImage(image2, image2unrotatedX, image2unrotatedY);
...

gc.restore();