如何在 JavaFX 中使用 CSS 将多路径 SVG 设置为形状

Question

我有一些按钮图标，我想在我的应用程序中使用，例如USB图标，其中包含多个路径来定义SVG形状。

现在，我将一个区域分配给按钮图形属性，使用 Java 构建一个多路径 SVG，然后将其作为形状分配给该区域。

这是多路径图标(使用 Java(的当前解决方案：

SVGPath usb1 = new SVGPath();
usb1.setContent("M44,18H42V3a1,1,0,0,0-1-1H23a1,1,0,0,0-1,1V18H20a1,1,0,0,0-1,1V49a13,13,0,0,0,26,0V19A1,1,0,0,0,44,18ZM24,4H40V18H24ZM43,49a11,11,0,0,1-22,0V20H43Z");
SVGPath usb2 = new SVGPath();
usb2.setContent("M37,13H34a1,1,0,0,1-1-1V9a1,1,0,0,1,1-1h3a1,1,0,0,1,1,1v3A1,1,0,0,1,37,13Zm-2-2h1V10H35Z");
SVGPath usb3 = new SVGPath();
usb3.setContent("M30,13H27a1,1,0,0,1-1-1V9a1,1,0,0,1,1-1h3a1,1,0,0,1,1,1v3A1,1,0,0,1,30,13Zm-2-2h1V10H28Z");
SVGPath usb4 = new SVGPath();
usb4.setContent("M41,42a3,3,0,1,0-4,2.816v3.566l-4,2V29.414l2.293,2.293a1,1,0,0,0,1.414-1.414l-4-4a1,1,0,0,0-1.414,0l-4,4a1,1,0,0,0,1.414,1.414L31,29.414V44.382l-4-2V40h1a1,1,0,0,0,1-1V36a1,1,0,0,0-1-1H24a1,1,0,0,0-1,1v3a1,1,0,0,0,1,1h1v3a1,1,0,0,0,.553.9L31,46.618V55a1,1,0,0,0,2,0V52.618L38.447,49.9A1,1,0,0,0,39,49V44.816A3,3,0,0,0,41,42ZM25,37h2v1H25Zm13,6a1,1,0,1,1,1-1A1,1,0,0,1,38,43Z");
Shape s = Shape.union(Shape.union(usb1,usb2),Shape.union(usb3,usb4));
((Region) paramUsbButton.getGraphic()).setShape(s);

对于单路径图标(使用 CSS(：

.finished-button Region{
-fx-background-color:black;
-fx-shape:"M26,0C11.664,0,0,11.663,0,26s11.664,26,26,26s26-11.663,26-26S40.336,0,26,0z M40.495,17.329l-16,18 C24.101,35.772,23.552,36,22.999,36c-0.439,0-0.88-0.144-1.249-0.438l-10-8c-0.862-0.689-1.002-1.948-0.312-2.811 c0.689-0.863,1.949-1.003,2.811-0.313l8.517,6.813l14.739-16.581c0.732-0.826,1.998-0.9,2.823-0.166 C41.154,15.239,41.229,16.503,40.495,17.329z";
}

我想直接管理 CSS 中的所有图标形状，有没有办法做到这一点而不必将 Java 用于多路径 SVG？

Answer 1

-fx-shape属性不限于单个路径。您可以简单地创建路径的串联来获取联合。通过这种方式，您可以轻松获取路径的联合，以便与 CSS 中的-fx-shape属性一起使用。

@Override
public void start(Stage primaryStage) throws Exception {
// 2 seperate paths to combine
String path1 = "M0,0h100v100h-100z";
String path2 = "M100,0l50,50l-50,50z";
Region region = new Region();
region.setPrefSize(150, 100);
region.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
region.setMinSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
region.setStyle("-fx-background-color: red; -fx-shape: ""+ path1 + path2 + "";");
primaryStage.setScene(new Scene(new StackPane(region), 300, 300));
primaryStage.show();
}

为方便起见，上面的示例使用内联样式，但您可以使用以下样式表轻松实现相同的效果。

.root>Region {
-fx-shape: "M0,0h100v100h-100zM100,0l50,50l-50,50z";
-fx-background-color: red;
}

Answer 2

你看过这里吗？ https://github.com/codecentric/javafxsvg 根据文档，这也将通过CSS工作。 我不知道这是否仍然适用于JavaFX> 8。 如果它确实让我知道，如果没有在 GitHub 上提交问题：-(