如何围绕另一个圆圈移动一个点使用Javafx画布？

Question

我想在另一个圆圈的边缘移动一个黑点。

这一点的移动路径是圆的边缘。

我在画布中画主题。

但PathTransition（）只接收Shape作为参数。

如何在画布中使用此圆作为移动路径???

btNewCircleClick（）：在这个方法中，单击“new 2 ciecle”将创建点和圆

btRun（）：在这种方法中，clike run会使这个点围绕圆圈移动。

Controller.kt：

package sample

import javafx.fxml.FXML
import javafx.scene.canvas.Canvas

class Controller{
    @FXML
    private lateinit var cv: Canvas
    @FXML
    fun btNewCircleClick(){
        val gc=cv.graphicsContext2D
        val c2=gc.fillOval(0.0, 0.0, 3.0, 3.0)
        val c1=gc.strokeOval(60.0, 60.0, 60.0, 60.0)
        //val pt=PathTransition(Duration.millis(4000.0),Circle(60.0,60.0,30.0),)
    }
    @FXML
    fun btRun(){

    }
}

sample.fxml

<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.canvas.Canvas?>
<?import javafx.scene.control.Button?>
<GridPane fx:controller="sample.Controller"
          xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10">
    <Button fx:id="btNewCircle" onMouseClicked="#btNewCircleClick" text="new 2 circle" GridPane.rowIndex="0" GridPane.columnIndex="0"></Button>
    <Button fx:id="btRun" onMouseClicked="#btRun" text="run" GridPane.rowIndex="1" GridPane.columnIndex="0"></Button>
    <Canvas fx:id="cv" width="200" height="200" GridPane.rowIndex="2" GridPane.columnIndex="0"></Canvas>
</GridPane>

我不知道如何让它移动......

Answer 1

你为什么要使用画布？在FX中你可以在Pane中轻松完成这个...... Canvas用于通过GraphicsContext进行原始绘图 - 与AWT Graphics没什么区别。 JavaFX中的效果/动画适用于场景图中的节点，而不适用于像素图形

public class Main extends Application {

Circle c, p;
PathTransition pt;

@Override
public void start(Stage primaryStage) {
    try {

        VBox root = new VBox();
        HBox hb = new HBox(5);
        Button movePoint = new Button("MOVE");
        movePoint.setOnAction(e -> {
            if (pt.getStatus() != Status.RUNNING) {
                pt.playFromStart();
            }

        });
        Button resetPoint = new Button("Reset");
        resetPoint.setOnAction(e -> {
            if (pt.getStatus() == Status.RUNNING) {
                pt.jumpTo("end");
            }
        });
        hb.getChildren().addAll(movePoint, resetPoint);

        StackPane sp = new StackPane();
        sp.setMinWidth(640);
        sp.setMinHeight(480);

        c = new Circle(100);
        c.setStroke(Color.BLACK);
        c.setFill(Color.TRANSPARENT);

        p = new Circle(5);
        p.setManaged(false);
        p.setFill(Color.ORANGERED);
        p.setTranslateX(sp.getMinWidth() / 2 + c.getRadius());
        p.setTranslateY(sp.getMinHeight() / 2);

        sp.getChildren().addAll(c, p);

        root.getChildren().addAll(hb, sp);
        Scene scene = new Scene(root);

        primaryStage.setScene(scene);
        primaryStage.show();
        initPT(p);

    } catch (Exception e) {
        e.printStackTrace();
    }
  }

  private void initPT(Node p) {
    pt = new PathTransition(Duration.millis(1500), c, p);
  }

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

Answer 2

改变了here和here的代码。这不是一个完美的轮换，但你可以弄清楚数学。这个例子使用AnimationTimer

import javafx.animation.AnimationTimer;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

/**
 *
 * @author blj0011
 */
public class JavaFXApplication135 extends Application
{
    @Override
    public void start(Stage theStage)
    {
        theStage.setTitle("Timeline Example");

        Group root = new Group();
        Scene theScene = new Scene(root);
        theStage.setScene(theScene);

        Canvas canvas = new Canvas(512, 512);
        root.getChildren().add(canvas);

        final long startNanoTime = System.nanoTime();

        new AnimationTimer()
        {
            @Override
            public void handle(long currentNanoTime)
            {
                GraphicsContext gc = canvas.getGraphicsContext2D();
                double t = (currentNanoTime - startNanoTime) / 1000000000.0;

                double x = 232 + 128 * Math.cos(t);
                double y = 232 + 128 * Math.sin(t);

                drawEarth(gc, x, y, Color.BLUE);
                drawSun(gc, 512 / 2.0, 512 / 2.0, Color.YELLOW);
            }
        }.start();

        theStage.show();
    }

    private void drawEarth(GraphicsContext gc, double x, double y, Color color)
    {
        // background image clears canvas
        gc.setFill(Color.CORNSILK);
        gc.fillRect(0, 0, 512, 512);//Clear the Canvas

        //Redraw Earth Circle
        gc.setFill(color);
        gc.fillOval(x, y, 50, 50);
    }

    private void drawSun(GraphicsContext gc, double x, double y, Color color)
    {
        gc.setFill(color);
        gc.fillOval(x, y, 50, 50);
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args)
    {
        launch(args);
    }

}

我不知道Kotlin翻译