JavaFX - 防止缩放画布上的像素化​​缩放模糊

Question

缩放画布时有什么方法可以阻止这种模糊吗？我认为这与 GPU 插值有关。但我需要的是像素完美的“像素化”缩放。只需使用最近的“真实”相邻像素的颜色。

我已经在这里看到了解决方案，但在两个建议有效的解决方案中（#1 / #4），#4 肯定是 CPU 扩展，我想#1 也是如此。

这种扩展需要很快 - 我希望能够支持最多 20-25 层（可能是 StackPane 中的 Canvas，但我愿意接受其他想法，只要它们不熔化 CPU）。我怀疑这是否可以在没有 JFX 提供的 GPU 支持的情况下完成，但也许无法使用足够灵活的 API。像链接答案中的 #4 这样依赖于 CPU 重新调整的策略可能不会起作用。

如果使用此代码放大到最高缩放级别，模糊现象会很明显。

我们是否需要更新 JFX API 来支持此功能或其他功能？这应该是可以做到的。

import javafx.application.Application;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Paint;
import javafx.stage.Stage;

public class ScaleTest extends Application {
    
    private static final int width = 1200;
    private static final int height = 800;
    private static final int topMargin = 32;
    private StackPane stackPane;
    private IntegerProperty zoomLevel = new SimpleIntegerProperty(100);
    
    @Override
    public void start(Stage stage) {
        stage.setWidth(width);
        stage.setMinHeight(height);
        
        stackPane = new StackPane();
        stackPane.setLayoutY(topMargin);
        Canvas canvas = new Canvas(width, height - topMargin);
        
        Label label = new Label();
        label.setLayoutY(2);
        label.setLayoutX(2);
        label.setStyle("-fx-text-fill: #FFFFFF");
        label.textProperty().bind(zoomLevel.asString());
        Button zoomInBtn = new Button("Zoom In");
        zoomInBtn.setLayoutY(2);
        zoomInBtn.setLayoutX(50);
        zoomInBtn.onActionProperty().set((e) -> {
            if (zoomLevel.get() < 3200) {
                zoomLevel.set(zoomLevel.get() * 2);
                stackPane.setScaleX(zoomLevel.get() / 100.0);
                stackPane.setScaleY(zoomLevel.get() / 100.0);
            }
        });
        Button zoomOutBtn = new Button("Zoom Out");
        zoomOutBtn.setLayoutY(2);
        zoomOutBtn.setLayoutX(140);
        zoomOutBtn.onActionProperty().set((e) -> {
            if (zoomLevel.get() > 25) {
                zoomLevel.set(zoomLevel.get() / 2);
                stackPane.setScaleX(zoomLevel.get() / 100.0);
                stackPane.setScaleY(zoomLevel.get() / 100.0);
            }
        });
        
        Pane mainPane = new Pane(stackPane, label, zoomInBtn, zoomOutBtn);
        mainPane.setStyle("-fx-background-color: #000000");
        Scene scene = new Scene(mainPane);
        stage.setScene(scene);
        
        drawGrid(canvas, 0, 0, width, height - topMargin, 16);
        stackPane.getChildren().add(canvas);
        
        stage.show();
    }
    
    private void drawGrid(Canvas canvas, int xPos, int yPos, int width, int height, int gridSize) {
        boolean darkX = true;
        String darkCol = "#111111";
        String lightCol = "#222266";
        
        for (int x = xPos; x < canvas.getWidth(); x += gridSize) {
            boolean dark = darkX;
            darkX = !darkX;
            if (x > width) {
                break;
            }
            
            for (int y = yPos; y < canvas.getHeight(); y += gridSize) {
                if (y > height) {
                    break;
                }
                
                dark = !dark;
                String color;
                if (dark) {
                    color = darkCol;
                } else {
                    color = lightCol;
                }
                canvas.getGraphicsContext2D().setFill(Paint.valueOf(color));
                canvas.getGraphicsContext2D().fillRect(x, y, gridSize, gridSize);
            }
        }
    }
}

Answer 1

您的示例调整节点的缩放属性以重新采样固定大小的图像，这不可避免地会导致此类伪影。只有向量表示才能以任意精度缩放。您可能需要决定您的应用程序如何支持矢量和/或位图。例如，如果您的应用程序实际上是关于缩放矩形的，那么您将fillRect()使用缩放后的坐标进行调用，而不是缩放较小矩形的图片。

您引用了一个很好的摘要或调整大小，因此我将重点关注矢量机会：

• Shape实际上，具体子类是可以以任何比例渲染的几何元素的矢量表示；调整此处或此处显示的示例的大小以查看效果；滚动到缩放并单击以将圆圈拖动到此处，注意其边框在所有比例下都保持锐利。

• AnSVGPath是Shape可以按此处所示缩放的。

• 在内部，aFont存储各个字形的向量表示。实例化后，字形会以特定的点大小进行光栅化。

• 如果已知合适的矢量表示，则可以将绘图与此处Canvas所示的大小联系起来。