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

2024-05-19 • 问答

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

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

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

$ cat 4.snapshot | grep 'version' 
              "version" : "1.9.2"
              "version" : "1.9.2"
              "version" : "1.9.2"
              "version" : "1.9.2"
              "version" : "1.9.2"
              "version" : "1.9.2"
              "version" : "1.9.2"
              "version" : "1.9.2"

对于单路径图标（使用CSS）：

SVGPath usb1 = new SVGPath();
usb1.setContent("M44,18H42V3a1,1,0-1-1H23a1,0-1,1V18H20a1,1V49a13,13,26,0V19A1,44,18ZM24,4H40V18H24ZM43,49a11,11,1-22,0V20H43Z");

SVGPath usb2 = new SVGPath();
usb2.setContent("M37,13H34a1,1-1-1V9a1,1-1h3a1,1v3A1,37,13Zm-2-2h1V10H35Z");

SVGPath usb3 = new SVGPath();
usb3.setContent("M30,13H27a1,30,13Zm-2-2h1V10H28Z");

SVGPath usb4 = new SVGPath();
usb4.setContent("M41,42a3,3,0-4,2.816v3.566l-4,2V29.414l2.293,2.293a1,1.414-1.414l-4-4a1,0-1.414,0l-4,4a1,1.414,1.414L31,29.414V44.382l-4-2V40h1a1,1-1V36a1,0-1-1H24a1,1v3a1,1h1v3a1,.553.9L31,46.618V55a1,2,0V52.618L38.447,49.9A1,39,49V44.816A3,41,42ZM25,37h2v1H25Zm13,6a1,1-1A1,38,43Z");

Shape s = Shape.union(Shape.union(usb1,usb2),Shape.union(usb3,usb4));
((Region) paramUsbButton.getGraphic()).setShape(s);

我想直接在CSS中管理所有图标形状，有没有一种方法可以不必在多路径SVG中使用Java？

@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(); }

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

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

大家都在问