JavaFX-调整简单应用程序大小导致画布清除/重新绘制导致“闪烁”

Question

这是我的控制器：

public class PrimaryController {

    public StackPane theRootPane;
    public CanvasPane theCanvasPane;
    int i = 1;

    public void initialize() {
        theCanvasPane  = new CanvasPane(500, 300);
        theRootPane.getChildren().addAll(theCanvasPane);

        Timeline theTimeline =
            new Timeline(new KeyFrame(Duration.millis(50), actionEvent -> UpdateCanvas(i++)));
        theTimeline.setCycleCount(Timeline.INDEFINITE);
        theTimeline.play();
    }

    private void UpdateCanvas(int diameter) {
        theCanvasPane.DrawCircleAtCenterOfCanvas(diameter);
    }

下面是我的CanvasPane类：

public class CanvasPane extends Pane {

private final Canvas theCanvas;
private GraphicsContext theGC;

public CanvasPane(double width, double height) {
    setWidth(width);
    setHeight(height);
    theCanvas = new Canvas(width, height);
    theGC = theCanvas.getGraphicsContext2D();

    getChildren().add(theCanvas);
    theCanvas.widthProperty().bind(this.widthProperty());
    theCanvas.heightProperty().bind(this.heightProperty());
    theCanvas.widthProperty().addListener(observable -> RedrawCanvas());
    theCanvas.heightProperty().addListener(observable -> RedrawCanvas());
}

private void RedrawCanvas() {
    ClearCanvas();
}

private void ClearCanvas() {
    theGC.clearRect(0, 0, theCanvas.widthProperty().doubleValue(),   theCanvas.heightProperty().doubleValue());
}

public void DrawCircleAtCenterOfCanvas(int diameter) {
    double centreX = theCanvas.widthProperty().doubleValue() / 2;
    double centreY = theCanvas.heightProperty().doubleValue() / 2;
    theGC.fillOval(centreX - diameter / 2.0, centreY - diameter / 2.0, diameter, diameter);
}

}

public class App extends Application {

    private static Scene scene;

    @Override
    public void start(Stage stage) throws IOException {
        scene = new Scene(loadFXML("primary"));
        stage.setScene(scene);
        //stage.setResizable(false);
        stage.show();
    }

    private static Parent loadFXML(String fxml) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(App.class.getResource(fxml + ".fxml"));
        return fxmlLoader.load();
    }

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

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.StackPane?>
<StackPane fx:id="theRootPane" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.xxx.PrimaryController" />

Answer 1

在ChangeListener中更新画布可能比在InvalidationListener中更新画布更好，这将导致更少的重绘。无论哪种方式，您都应该：

>

确保在画布大小更改时重新绘制圆圈（使用当前代码，只要画布大小更改，您就会清除画布，但直到下一个关键帧才重新绘制圆圈，因此在这两个关键帧之间会出现一些空白画布）：

 public class CanvasPane extends Pane {

     private final Canvas theCanvas;
     private GraphicsContext theGC;

     private int currentDiameter ;

     public CanvasPane(double width, double height) {
         setWidth(width);
         setHeight(height);
         theCanvas = new Canvas(width, height);
         theGC = theCanvas.getGraphicsContext2D();

         getChildren().add(theCanvas);
         theCanvas.widthProperty().bind(this.widthProperty());
         theCanvas.heightProperty().bind(this.heightProperty());
         theCanvas.widthProperty().addListener((obs, oldWidth, newWidth) -> redrawCanvas());
         theCanvas.heightProperty().addListener((obs, oldHeight, newHeight) -> redrawCanvas());
     }

     public void increaseDiameter() {
         currentDiameter++;
         redrawCanvas();
     }

     private void redrawCanvas() {
         clearCanvas();
         drawCircleAtCenterOfCanvas();
     }

     private void clearCanvas() {
         theGC.clearRect(0, 0, theCanvas.widthProperty().doubleValue(), theCanvas.heightProperty().doubleValue());
     }

     public void drawCircleAtCenterOfCanvas() {
         currentDiameter = currentDiameter ;
         double centreX = theCanvas.widthProperty().doubleValue() / 2;
         double centreY = theCanvas.heightProperty().doubleValue() / 2;
         theGC.fillOval(centreX - currentDiameter / 2.0, centreY - currentDiameter / 2.0, currentDiameter, currentDiameter);
     }
 }

而且

public class PrimaryController {

     @FXML
     private StackPane theRootPane;
     @FXML
     private CanvasPane theCanvasPane;

     public void initialize() {
         theCanvasPane  = new CanvasPane(500, 300);
         theRootPane.getChildren().addAll(theCanvasPane);

         Timeline theTimeline =
             new Timeline(new KeyFrame(Duration.millis(50), actionEvent -> updateCanvas()));
         theTimeline.setCycleCount(Timeline.INDEFINITE);
         theTimeline.play();
     }

     private void updateCanvas() {
         theCanvasPane.increaseDiameter();
     }
 }

 public class PrimaryController {

     @FXML
     private StackPane theRootPane;

     private Circle circle ;

     public void initialize() {

         circle = new Circle();
         theRootPane.getChildren().addAll(circle);

         Timeline theTimeline =
             new Timeline(new KeyFrame(Duration.millis(50), actionEvent -> updateCircle()));
         theTimeline.setCycleCount(Timeline.INDEFINITE);
         theTimeline.play();
     }

     private void updateCircle() {
         circle.setRadius(circle.getRadius()+0.5);
     }
 }