捕捉到像素并避免模糊的通用机制答案

【问题标题】：General mechanism to snap to pixel and avoid blurryness捕捉到像素并避免模糊的通用机制
【发布时间】：2015-03-25 15:29:56
【问题描述】：

我正在创建一个带有 2 个相互重叠的矩形的健康栏。内层显示当前生命值，外层显示总生命值。

问题

血条模糊。

到目前为止我所得到的

我读过关于 e。 G。 having to add 0.5，不过只是部分解决了问题。

截图，上图不加0.5，下图加0.5。

代码如下：

private class HealthBar extends Pane {

    Rectangle outerHealthRect;
    Rectangle innerHealthRect;

    public HealthBar() {

        double height = 10;

        double outerWidth = 60;
        double innerWidth = 40;

        // using 0.5, otherwise it would be blurry
        double x=snap( 0.0);
        double y=snap( 0.0);

        outerHealthRect = new Rectangle( x, y, outerWidth, height);
        outerHealthRect.setStroke(Color.BLACK);
        outerHealthRect.setFill(Color.WHITE);

        innerHealthRect = new Rectangle( x, y, innerWidth, height);
        innerHealthRect.setStroke(Color.TRANSPARENT);
        innerHealthRect.setFill(Color.LIMEGREEN);

        getChildren().addAll( outerHealthRect);
        getChildren().addAll( innerHealthRect);

    }

    public void setValue( double value) {
        innerHealthRect.setWidth( snap( outerHealthRect.getWidth() * value));
    }

    private double snap( double value) {
        return (int) value + 0.5;
    }
}

在我为调试目的应用缩放后，很明显透明笔画不像带颜色的笔画那样被视为具有相同宽度的透明线：

问题

是否有捕捉到像素的选项，即。 e.一般都有清晰的像素，而不必乱用 0.5？
如何使透明笔划与外部笔划宽度相同？

我可以尝试使用画布的不同方法，但这些是影响您必须设置 JavaFX 应用程序的方式的一般问题。

非常感谢。

【问题讨论】：

如果你还没有看到这个，stackoverflow.com/a/11887786/2855515
谢谢，我还没有看到它，但是当我搜索网络时，我发现了 snapToPixels，并且您应该使用 INSIDE 或 OUTSIDE 而不是 CENTERED。这些给了我迄今为止最好的结果。但是我应用它们后仍然有模糊，例如。 G。绿色矩形的右侧是一条模糊线。

标签： javafx blur

【解决方案1】：

不要捕捉填充。我链接到的问题解释了在像素上绘制线条（通过中间 - 这需要整个像素），这意味着 +0.5，因为坐标在像素之间。

填充需要在整个像素上绘制到它们之间的空间。

public HealthBar() {

    double height = 10;

    double outerWidth = 60;
    double innerWidth = 40;

    double x=10,y=10;//away from pane edge just to see better

    outerHealthRect = new Rectangle( snap(x), snap(y), outerWidth, height);
    outerHealthRect.setStroke(Color.BLACK);
    outerHealthRect.setFill(Color.WHITE);

    //just move green bar right a bit to see edges
    //and move it down 1 pix so it's not over the black edge
    //this means height is -1 as well
    innerHealthRect = new Rectangle( x+11, y+1, innerWidth, height-1);
    innerHealthRect.setFill(Color.LIMEGREEN);
    //no need to draw transparent anything

    getChildren().addAll( outerHealthRect);
    getChildren().addAll( innerHealthRect);

}

【讨论】：

啊，我明白了。非常感谢！