如何使用Javafx Canvas绘制1像素线？

Question

我一直在谷歌搜索,发现一些相关的问题/帖子,但没有解决我的问题.

我使用以下方法直接在画布上绘制线条(JavaFX):

gc.setStroke(color);
gc.setLineWidth(lineWidth);
gc.strokeLine(startX, startY, endX, endY);

我想要1像素宽的线条.所以我设置lineWidth = 1.我明白了:

请注意,线条模糊.它不是1个像素.我试图将lineWidth设置为0.1或0.01等.它不会改变结果.

顺便说一句......我不明白为什么这个参数是双重的.我在某处读到它与DPI有关.但我不明白单位是什么以及如何将其转换为像素.Oracle的文档没有帮助.(或者我找不到那个有帮助的人)

我想改为:

这是在另一个平台上实现的.请注意,线条很清晰,只有一个像素.

Answer 1

想象每个像素为(小)矩形(而不是点).整数坐标是像素之间的边界; 所以带有整数坐标的(水平或垂直)线落在"像素之间".这是通过抗锯齿渲染的,在一个像素上接近一半,在另一个像素上接近一半.向左或向右移动0.5像素的线将其移动到像素的中心,绕过问题.

这是一个示例:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class SharpCanvasTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        Canvas sharpCanvas = createCanvasGrid(600, 300, true);
        Canvas blurryCanvas = createCanvasGrid(600, 300, false);
        VBox root = new VBox(5, sharpCanvas, blurryCanvas);
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }

    private Canvas createCanvasGrid(int width, int height, boolean sharp) {
        Canvas canvas = new Canvas(width, height);
        GraphicsContext gc = canvas.getGraphicsContext2D() ;
        gc.setLineWidth(1.0);
        for (int x = 0; x < width; x+=10) {
            double x1 ;
            if (sharp) {
                x1 = x + 0.5 ;
            } else {
                x1 = x ;
            }
            gc.moveTo(x1, 0);
            gc.lineTo(x1, height);
            gc.stroke();
        }

        for (int y = 0; y < height; y+=10) {
            double y1 ;
            if (sharp) {
                y1 = y + 0.5 ;
            } else {
                y1 = y ;
            }
            gc.moveTo(0, y1);
            gc.lineTo(width, y1);
            gc.stroke();
        }
        return canvas ;
    }

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

结果如下: