如何使用Javafx canvas在另一个Circle上移动Point？

Question

I want to move a black point around the edge of another circle.

The move path of this point is edge of circle.

I draw theme in Canvas .

But PathTransition() only receive Shape as parameter.

How can I use this circle in canvas as move path ???

btNewCircleClick():in this method，click "new 2 ciecle" will creat point and circle

btRun():in this method,clike run will make this point move around the circle.

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>

I don't know how to make it move...

Answer 1

Why do you want to use a canvas? In FX you could do this easily within a Pane..... Canvas is for raw drawing via GraphicsContext - not much difference to an AWT Graphics. Effects/Anims in JavaFX are for Nodes within the scenegraph, not for pixel graphics

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

Altered code from here and here . The is not a perfect rotation but you can figure out the math for that. This example uses 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);
    }

}

I don't know the Kotlin translation