从JavaFX Canvas中擦除抗锯齿形状

3

我需要扩展一个模拟程序,原始版本使用AWT图形库编写为Applet。在添加新功能之前,我想将程序适应桌面,并使用JavaFX替换AWT。

该模拟程序每秒绘制数百或数千个对象数十次,然后将它们擦除并在新位置重新绘制,从而有效地使它们动画化。我正在使用Canvas对象来实现UI的这一部分。通过用背景颜色重新绘制对象来完成擦除操作。然而,我看到的问题是擦除对象不完整,似乎留下了一种“光晕”。

以下程序说明了这个问题。单击“Draw”按钮会导致它使用前景颜色在Canvas上绘制几百个圆。绘制完成后,再次单击按钮将通过使用背景颜色重新绘制它们来擦除这些圆。多次绘制和擦除将建立一个可见的“幽灵”图像背景。

package com.clartaq.antialiasingghosts;

import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

import java.util.Random;

public class Main extends Application {

    static final int NUM_CIRCLES = 500;
    static final int CIRCLE_DIAMETER = 10;
    static final double PANEL_WIDTH = 75.0;
    static final double PANEL_HEIGHT = 40.0;
    static final Color FG_COLOR = Color.rgb(10, 0, 200);
    static final Color BG_COLOR = Color.rgb(255, 255, 255);
    static final double BUTTON_WIDTH = 50.0;

    GraphicsContext gc;

    Random rand = new Random();

    double[] px = new double[NUM_CIRCLES];
    double[] py = new double[NUM_CIRCLES];

    void randomizeParticlePositions() {
        for (int i = 0; i < NUM_CIRCLES; i++) {
            px[i] = rand.nextDouble() * PANEL_WIDTH;
            py[i] = rand.nextDouble() * PANEL_HEIGHT;
        }
    }

    void drawCircles(Color color) {
        gc.setFill(color);
        for (int i = 0; i < NUM_CIRCLES; i++) {
            var screenX = px[i] * CIRCLE_DIAMETER;
            var screenY = py[i] * CIRCLE_DIAMETER;
            gc.fillOval(screenX, screenY, CIRCLE_DIAMETER, CIRCLE_DIAMETER);
        }
    }

    @Override
    public void start(Stage stage) {
        String javaVersion   = System.getProperty("java.version");
        String javafxVersion = System.getProperty("javafx.version");

        stage.setTitle("AntiAliasingGhosts -- erasing objects leaves ghosts in JavaFX");

        Label versionLabel = new Label("JavaFX " + javafxVersion
                + ", running on Java " + javaVersion + ".");

        double canvasWidth  = (PANEL_WIDTH * CIRCLE_DIAMETER);
        double canvasHeight = (PANEL_HEIGHT * CIRCLE_DIAMETER);
        Canvas canvasRef    = new Canvas(canvasWidth, canvasHeight);
        gc = canvasRef.getGraphicsContext2D();

        Button deBtn = new Button("Draw");
        deBtn.setPrefWidth(BUTTON_WIDTH);
        deBtn.setOnAction(e -> {
            String txt = deBtn.getText();
            switch (txt) {
                case "Draw" -> {
                    randomizeParticlePositions();
                    drawCircles(FG_COLOR);
                    deBtn.setText("Erase");
                }
                case "Erase" -> {
                    drawCircles(BG_COLOR);
                    deBtn.setText("Draw");
                }
                default -> Platform.exit();
            }
        });

        Button exBtn = new Button("Exit");
        exBtn.setPrefWidth(BUTTON_WIDTH);
        exBtn.setOnAction(e -> Platform.exit());

        TilePane tp = new TilePane();
        tp.setAlignment(Pos.CENTER);
        tp.setHgap(10);
        tp.getChildren().addAll(deBtn, exBtn);

        VBox root = new VBox();
        root.setPadding(new Insets(7));
        root.setSpacing(10);
        root.setAlignment(Pos.CENTER);
        root.getChildren().addAll(versionLabel, canvasRef, tp);

        StackPane      sp = new StackPane(root);
        BackgroundFill bf = new BackgroundFill(BG_COLOR, CornerRadii.EMPTY, Insets.EMPTY);
        Background     bg = new Background(bf);
        sp.setBackground(bg);

        Scene scene = new Scene(sp, 640.0, 480.0);

        stage.setScene(scene);
        stage.show();
    }

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

}

当擦除时,将圆的直径扩大2个像素可以获得良好的擦除效果。当然,这也会影响到附近的形状。
此外,使用fillRect方法擦除整个画布似乎是合理的,但这意味着如果需要重新绘制任何内容,则必须重新绘制所有内容。我认为可以通过擦除并重绘Canvas的较小部分来优化重新绘制,但如果没有必要,我不想这样做。
放大程序显示的部分可显示它实际上是抗锯齿效果。使用SceneAntialiasing.DISABLED参数构建场景似乎没有任何效果。
尝试按此问题中建议的关闭图像平滑处理并没有帮助。
可以通过在背景颜色下重新绘制来擦除在画布上绘制的单个形状。
我正在使用Java 17.0.1、JavaFX 17.0.1和5K Mac显示器,如果相关的话。
1个回答

3

为了方便起见,请注意GraphicsContextfillOvalstrokeOval()之间的区别。您可以根据适当的布尔值条件性地擦除drawCircles()中的轮廓:

if (stroke) {
    gc.setStroke(BG_COLOR);
    gc.strokeOval(screenX, screenY, CIRCLE_DIAMETER, CIRCLE_DIAMETER);
}

尝试几个代表性的形状,例如fillRect,以验证所需结果。

在我看来,更好的选择是采用“擦除->渲染”策略。可以查看这里这里的完整示例,以帮助您确定该方法是否可扩展到您的用例。此外,请参见这个相关的分析

测试后的快速方法:

import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

import java.util.Random;

public class Main extends Application {

    static final int NUM_CIRCLES = 500;
    static final int CIRCLE_DIAMETER = 10;
    static final double PANEL_WIDTH = 75.0;
    static final double PANEL_HEIGHT = 40.0;
    static final Color FG_COLOR = Color.rgb(10, 0, 200);
    static final Color BG_COLOR = Color.rgb(255, 255, 255);
    static final double BUTTON_WIDTH = 50.0;

    GraphicsContext gc;

    Random rand = new Random();
    private boolean stroke;

    double[] px = new double[NUM_CIRCLES];
    double[] py = new double[NUM_CIRCLES];

    void randomizeParticlePositions() {
        for (int i = 0; i < NUM_CIRCLES; i++) {
            px[i] = rand.nextDouble() * PANEL_WIDTH;
            py[i] = rand.nextDouble() * PANEL_HEIGHT;
        }
    }

    void drawCircles(Color color) {
        gc.setFill(color);
        for (int i = 0; i < NUM_CIRCLES; i++) {
            var screenX = px[i] * CIRCLE_DIAMETER;
            var screenY = py[i] * CIRCLE_DIAMETER;
            gc.fillOval(screenX, screenY, CIRCLE_DIAMETER, CIRCLE_DIAMETER);
            if (stroke) {
                gc.setStroke(BG_COLOR);
                gc.strokeOval(screenX, screenY, CIRCLE_DIAMETER, CIRCLE_DIAMETER);
            }
        }
    }

    @Override
    public void start(Stage stage) {
        String javaVersion = System.getProperty("java.version");
        String javafxVersion = System.getProperty("javafx.version");

        stage.setTitle("AntiAliasingGhosts -- erasing objects leaves ghosts in JavaFX");

        Label versionLabel = new Label("JavaFX " + javafxVersion
            + ", running on Java " + javaVersion + ".");

        double canvasWidth = (PANEL_WIDTH * CIRCLE_DIAMETER);
        double canvasHeight = (PANEL_HEIGHT * CIRCLE_DIAMETER);
        Canvas canvasRef = new Canvas(canvasWidth, canvasHeight);
        gc = canvasRef.getGraphicsContext2D();

        Button deBtn = new Button("Draw");
        deBtn.setPrefWidth(BUTTON_WIDTH);
        deBtn.setOnAction(e -> {
            String txt = deBtn.getText();
            switch (txt) {
                case "Draw" -> {
                    randomizeParticlePositions();
                    drawCircles(FG_COLOR);
                    deBtn.setText("Erase");
                    stroke = true;
                }
                case "Erase" -> {
                    drawCircles(BG_COLOR);
                    deBtn.setText("Draw");
                    stroke = false;
                }
                default ->
                    Platform.exit();
            }
        });

        Button exBtn = new Button("Exit");
        exBtn.setPrefWidth(BUTTON_WIDTH);
        exBtn.setOnAction(e -> Platform.exit());

        TilePane tp = new TilePane();
        tp.setAlignment(Pos.CENTER);
        tp.setHgap(10);
        tp.getChildren().addAll(deBtn, exBtn);

        VBox root = new VBox();
        root.setPadding(new Insets(7));
        root.setSpacing(10);
        root.setAlignment(Pos.CENTER);
        root.getChildren().addAll(versionLabel, canvasRef, tp);

        StackPane sp = new StackPane(root);
        BackgroundFill bf = new BackgroundFill(BG_COLOR, CornerRadii.EMPTY, Insets.EMPTY);
        Background bg = new Background(bf);
        sp.setBackground(bg);

        Scene scene = new Scene(sp, 640.0, 480.0);

        stage.setScene(scene);
        stage.show();
    }

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

}

1
谢谢你,@trashgod。对形状进行描绘起作用了。另外,随着我深入研究这个问题,erase -> render 策略看起来适用于除了一些明确定义的问题配置之外的所有情况。 - clartaq

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接