Как установить многолучевой SVG как фигуру, используя CSS в JavaFX - PullRequest
Новая
       11

Как установить многолучевой SVG как фигуру, используя CSS в JavaFX

0 голосов
/ 15 января 2020

У меня есть несколько значков кнопок, которые я хотел бы использовать в своем приложении, например значок USB, которые содержат несколько путей для определения формы SVG.

А пока я назначаю регион графическому свойству кнопки, создаю многолучевой SVG-файл, используя Java, а затем присваиваем региону форму фигуры.

Это текущее решение для значков с несколькими путями (с 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?

Ответы [ 2 ]

0 голосов
/ 16 января 2020

Свойство -fx-shape не ограничено одним путем. Вы можете просто создать объединение путей, чтобы получить объединение. Таким способом вы можете легко получить объединение путей для использования со свойством -fx-shape в CSS. 

@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;
}
0 голосов
/ 15 января 2020

Вы смотрели здесь? https://github.com/codecentric/javafxsvg Согласно документации это также будет работать через CSS. Я понятия не имею, работает ли это по-прежнему с JavaFX> 8. Если это так, дайте мне знать, и если нет, сообщите о проблеме на GitHub: -)

...