基于JavaFX FXML的应用程序中线条和曲线上的锐边

Question

在JavaFX画布上绘制的线条具有锋利的清晰边缘.

例如,我从JavaFX Canvas文档中获取了演示代码.以下是演示应用程序的结果:

以下是基于FXML的应用程序的结果:

正在从代码手动创建Canvas.在绘制的那一刻它已经在舞台上了.

模糊效果,圆线帽和圆线连接无济于事.

gcProgress.setEffect(blur);
gcProgress.setStroke(Color.ROYALBLUE);
gcProgress.setLineCap(StrokeLineCap.ROUND);
gcProgress.setLineJoin(StrokeLineJoin.ROUND);
gcProgress.setLineWidth(3);

PS也许这很重要,与字体相同的问题:抗锯齿似乎无法正常工作.在Windows和Mac上测试过.

Answer 1

您需要设置smooth="true"您的元素。

这也可以在场景生成器中完成：使用 SceneBuilder (v8.2.0) 时，Arc->Properties->“Smooth”复选框。

结果：

以下是生成的 FXML 文件的片段：

<Arc fill="WHITE" layoutX="71.0" layoutY="61.0" length="270.0" radiusX="30.0" radiusY="30.0" startAngle="45.0" stroke="#1500ff" strokeLineCap="ROUND" strokeType="INSIDE" strokeWidth="4.0" type="ROUND" />
<Arc fill="WHITE" layoutX="138.0" layoutY="61.0" length="270.0" radiusX="30.0" radiusY="30.0" startAngle="45.0" stroke="#1500ff" strokeLineCap="ROUND" strokeType="INSIDE" strokeWidth="4.0" type="CHORD" />
<Arc fill="WHITE" layoutX="201.0" layoutY="61.0" length="270.0" radiusX="30.0" radiusY="30.0" startAngle="45.0" stroke="#1500ff" strokeLineCap="ROUND" strokeWidth="4.0" />

<Arc fill="WHITE" smooth="false" layoutX="71.0" layoutY="133.0" length="270.0" radiusX="30.0" radiusY="30.0" startAngle="45.0" stroke="#1500ff" strokeLineCap="ROUND" strokeType="INSIDE" strokeWidth="4.0" type="ROUND" />
<Arc fill="WHITE" smooth="false" layoutX="138.0" layoutY="133.0" length="270.0" radiusX="30.0" radiusY="30.0" startAngle="45.0" stroke="#1500ff" strokeLineCap="ROUND" strokeType="INSIDE" strokeWidth="4.0" type="CHORD" />
<Arc fill="WHITE" smooth="false" layoutX="201.0" layoutY="133.0" length="270.0" radiusX="30.0" radiusY="30.0" startAngle="45.0" stroke="#1500ff" strokeLineCap="ROUND" strokeWidth="4.0" />