【问题标题】:JavaFX Canvas rotate image with fixed center (and without bouncing)JavaFX Canvas 以固定中心旋转图像(并且不反弹)
【发布时间】:2017-10-02 16:38:06
【问题描述】:

我尝试对带有旋转转子/头部的风车进行编程。茎本身是固定的,并作为背景绘制到画布 (javafx) 上。转子/头本身是另一个图像。我想我可以旋转图像本身并将其绘制到图形上下文中。 (没用)然后我尝试了各种方法:

一个。将图像绘制到另一个画布上,旋转画布,制作该画布的快照。 (没用)

b.制作一个imageview,旋转imageview,对其进行快照并绘制它(没用)和

c。我试图做一个 RotateTransition (没用)。现在我回到 b:我旋转的图像的 ImageView。

b 有点作品,有点!它以某种方式“反弹”,我不知道为什么,因为文档说 ImageView.setRotate(..) 围绕中心旋转图像。图像本身具有相同的高度和长度,因此它应该像矩形一样反弹。我只是希望这种反弹停止。see here (SO didnt allow me to post a gif)

所有这些失败的尝试都来自本论坛的阅读。

Source Code here 或文本:

package sample;

import javafx.animation.AnimationTimer;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.SnapshotParameters;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

import java.io.IOException;


public class Main extends Application {
    private Pane root;
    private Canvas canvas;
    private GraphicsContext gc;
    SnapshotParameters params = new SnapshotParameters();

    private final Image stem = new Image(getClass().getResource("windrad.png").toExternalForm());
    private final ImageView wheel = new ImageView(new Image(getClass().getResource("rad.png").toExternalForm()));

    private final int height = 720;
    private final int width = 720;
    private final double distanceWidth = 400.0 / 720.0;
    private final double distanceHeight = 240.0 / 720.0;
    private int degrees = 0;

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

    @Override
    public void start(Stage primaryStage) throws Exception{
        params.setFill(Color.TRANSPARENT);

        FXMLLoader fxmlLoader = new FXMLLoader();
        fxmlLoader.setLocation(getClass().getResource("sample.fxml"));

        try {
            root = fxmlLoader.load();
            canvas = (Canvas) fxmlLoader.getNamespace().get("canvas");
            canvas.setHeight(height);
            canvas.setWidth(width);
            primaryStage.setHeight(height);
            primaryStage.setWidth(width);
            gc = canvas.getGraphicsContext2D();
        } catch (IOException e) {
            e.printStackTrace();
        }

        primaryStage.setTitle("Hello World");
        primaryStage.setScene(new Scene(root));
        primaryStage.show();

        animation().start();
    }

    private AnimationTimer animation() {
        return new AnimationTimer() {
            @Override
            public void handle(long now) {
                gc.clearRect(0,0, width, height);
                gc.drawImage(stem, 0, 0);
                degrees = degrees >= 360 ? 0 : ++degrees;
                wheel.setRotate(degrees);
                gc.drawImage(wheel.snapshot(params, null),  width * distanceWidth - (int) wheel.getImage().getWidth() / 2, height * distanceHeight - (int) wheel.getImage().getHeight() / 2);

            }
        };
    }
}

好的,所以我开始工作了! @James_D 帮了我很多。我没有将它绘制到画布上,而是将所有对象放在场景图中并将其移动到那里。由于我的转子/头是一个 imageview,我可以使用 imageview.setRotate()。我的问题(为此我发布了这个帖子)源于使用画布。我仍然不知道弹跳错误是如何发生的,但我的项目目标已经实现。新的源代码在答案中。

【问题讨论】:

  • 你必须使用画布吗?在场景图中放置节点可能会更容易。
  • 另见meta.stackoverflow.com/questions/285551/…。请edit您的问题并直接包含代码。
  • @James_D 如何直接包含代码?只是在文本编辑器中复制粘贴或命令?我会阅读ob场景图!
  • @James_D 好的,确实有效!谢谢,问题解决了。
  • 优秀。如果您认为对其他人有帮助,您可以考虑发布您自己问题的答案(使用代码等)。您可以在一段宽限期后接受答案。

标签: canvas javafx rotation imageview bounce


【解决方案1】:

我的意思是在场景图中放置节点,而不是在画布上绘制。当然,您(当然)将画布放在场景图中。但是画布一旦绘制就很难修改。 - @James_D

这条评论帮助并解决了我的问题。问题中列出了新的源代码。我没有将其绘制到画布上,而是将所有对象放在场景图中并移动了图像视图而不是画布或图像。这是新的源代码:

package sample;

import javafx.animation.AnimationTimer;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;

public class Main extends Application {
    private Group root;

    private final ImageView stem = new ImageView(new Image(getClass().getResource("windrad.png").toExternalForm()));
    private final ImageView wheel = new ImageView(new Image(getClass().getResource("rad.png").toExternalForm()));

    private final int height = 720;
    private final int width = 720;
    private final double distanceWidth = 360.0 / 720.0;
    private final double distanceHeight = 270.0 / 720.0;

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

    @Override
    public void start(Stage primaryStage) throws Exception{
        root = new Group();
        root.getChildren().add(stem);
        root.getChildren().add(wheel);
        wheel.setX(width * distanceWidth - wheel.getImage().getWidth() / 2);
        wheel.setY(height * distanceHeight - wheel.getImage().getHeight() / 2);
        primaryStage.setTitle("Pinwheel");
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
        primaryStage.getIcons().add(new Image(getClass().getResource("windrad.png").toExternalForm()));

        animation().start();
    }

    private AnimationTimer animation() {
        return new AnimationTimer() {
            @Override
            public void handle(long now) {
                wheel.setRotate(wheel.getRotate() + 1);
            }
        };
    }
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-08-18
    • 2013-02-10
    • 2015-08-06
    • 1970-01-01
    • 2020-08-31
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多