首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >JavaFX drawImage旋转

JavaFX drawImage旋转
EN

Stack Overflow用户
提问于 2015-11-09 16:28:08
回答 3查看 7.3K关注 0票数 2

我正在使用JavaFX,在类开始(theStage阶段)中,我有以下代码:

代码语言:javascript
复制
/*... Scene, stage, canvas ...*/
GraphicsContext gc = canvas.getGraphicsContext2D();
Image imgage = new Image("gfx/image.png");
gc.drawImage(image, 256, 256);

我如何画它旋转而不旋转的轴?我发现并尝试过这个:

代码语言:javascript
复制
gc.save(); // saves the current state on stack, including the current transform
gc.rotate(45);
gc.drawImage(image);
gc.restore();

然而,它也转换轴和当我移动图像使用改变位置x&y。它出错了,因为它也使轴旋转。我一直在考虑使用sin和cos函数重新计算运动,但我确信有这样一个更容易的解决方案。

它可能适用于BufferedImage,但是他们使用不同的Graphics类绘制它,我不知道如何使它一起工作。

编辑:好的,如何只旋转图像而不旋转整个GraphicsContext?

解题:谢谢大家的帮助:)我通过使用这个>>解决了这个问题

代码语言:javascript
复制
ImageView iv = new ImageView(new Image( "gfx/earth.png"));
iv.setRotate(40);
SnapshotParameters params = new SnapshotParameters();
params.setFill(Color.TRANSPARENT);
Image rotatedImage = iv.snapshot(params, null);
gc.drawImage(rotatedImage, 0, 0);
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-11-09 20:54:47

看看我能不能理解你的问题..。

如何只旋转图像而不旋转整个GraphicsContext?

你不能只用一个GraphicsContext就能做到这一点。您需要旋转GraphicsContext以获得使用drawImage API呈现到其上的旋转图像。为了防止旋转操作影响到其他画布绘制操作,您可以在执行旋转之前和之后保存和恢复GraphicsContext (就像您在问题中的代码中显示的那样)。

但是,在不旋转GraphicsContext的情况下实现所需的一种方法是将SceneGraph与画布结合使用。将图像放置在ImageView中,对图像应用旋转变换,对其进行快照以获得旋转图像,然后将旋转图像绘制到画布中。

代码语言:javascript
复制
ImageView iv = new ImageView(image);
iv.setRotate(40);
SnapshotParameters params = new SnapshotParameters();
params.setFill(Color.TRANSPARENT);
Image rotatedImage = iv.snapshot(params, null);
gc.drawImage(rotatedImage, 0, 0);

样本代码:

代码语言:javascript
复制
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.SnapshotParameters;
import javafx.scene.canvas.*;
import javafx.scene.image.*;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

/** Rotates and places it in a canvas */
public class RotatedImageInCanvas extends Application {
    @Override public void start(Stage stage) {
        Image image = new Image(
            "http://worldpress.org/images/maps/world_600w.jpg", 350, 0, true, true
        );

        // creates a canvas on which rotated images are rendered.
        Canvas canvas = new Canvas(600, 400);
        GraphicsContext gc = canvas.getGraphicsContext2D();

        ImageView iv = new ImageView(image);
        iv.setRotate(40);
        SnapshotParameters params = new SnapshotParameters();
        params.setFill(Color.TRANSPARENT);
        Image rotatedImage = iv.snapshot(params, null);
        gc.drawImage(rotatedImage, 0, 0);

        // supplies a tiled background image on which the canvas is drawn.
        StackPane stack = new StackPane();
        stack.setMaxSize(canvas.getWidth(), canvas.getHeight());
        stack.setStyle("-fx-background-image: url('http://1.bp.blogspot.com/_wV5JMD1OISg/TDYTYxuxR4I/AAAAAAAAvSo/a0zT8nwPV8U/s400/louis-vuitton-nice-beautiful.jpg');");
        stack.getChildren().add(
                canvas
        );

        // places a resizable padded frame around the canvas.
        StackPane frame = new StackPane();
        frame.setPadding(new Insets(20));
        frame.getChildren().add(stack);

        stage.setScene(new Scene(frame, Color.BURLYWOOD));
        stage.show();
    }

    public static void main(String[] args) { launch(RotatedImageInCanvas.class); }
}

通常,我不建议将场景图和画布API混合在上面的示例中,而是只对场景图API或画布API进行编码。

有关纯画布解决方案的示例,请参见以下内容的答案:

通常,对于大多数操作,我发现使用场景图API比对画布API编码更简单,并建议在大多数任务中使用场景图API而不是画布API。

票数 4
EN

Stack Overflow用户

发布于 2019-01-11 07:58:30

一种同样有效的快速和肮脏的方法是平移和旋转整个GraphicsContext,然后绘制相对于0的图像(在本例中,旋转是从图像的中间)。然后,在绘制图像之后,反转操作。

例如,如果您有图像(img)、GraphicsContext (gc)和图像的位置(xp,yp),那么:

代码语言:javascript
复制
// Translate and rotate.
gc.translate(xp, yp);
gc.rotate(degrees);

// Note how the image is drawn relative to 0.  Since the image needs to be
// rotated around the image center, the center is simply half of the image
// dimension.
gc.drawImage( image, -image.getWidth/2.0, -image.getImageHeight/2.0);

// Reverse the translation and rotation once drawn.
gc.rotate(-degrees);
gc.translate(-xp, -yp);
票数 2
EN

Stack Overflow用户

发布于 2017-05-16 16:09:17

根据另一条注释,您应该添加setViewport和setTransform,就像我在rotateImage函数中所做的那样,如果您想将图像旋转到一个点上,而不想改变图像的中心位置。

代码语言:javascript
复制
public Image rotateImage(Image image, int rotation) {
    ImageView iv = new ImageView(image);
    SnapshotParameters params = new SnapshotParameters();
    params.setFill(Color.TRANSPARENT);
    params.setTransform(new Rotate(rotation, image.getHeight() / 2, image.getWidth() / 2));
    params.setViewport(new Rectangle2D(0, 0, image.getHeight(), image.getWidth()));
    return iv.snapshot(params, null);
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33613664

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档