Использование Font Awesome 5 SVG в качестве форм кнопок JavaFX - PullRequest
Новая
       23

Использование Font Awesome 5 SVG в качестве форм кнопок JavaFX

0 голосов
/ 02 сентября 2018

В настоящее время я разрабатываю недекорированное приложение JavaFX и пытаюсь добавить кнопки «закрыть», «развернуть» и «свернуть» и настроить их форму на Font Awesome 5 SVG.

Но некоторые SVG, похоже, не отображаются правильно, например "window-minim" выглядит как просто блок. (См. Изображение)

window-minimize example

FXML для кнопок 

<Button fx:id="min" mnemonicParsing="false">
 <HBox.margin>
  <Insets right="2.5" />
 </HBox.margin>
</Button>
<Button fx:id="max" mnemonicParsing="false">
 <HBox.margin>
  <Insets left="2.5" right="2.5" />
 </HBox.margin></Button>
<Button fx:id="exit" mnemonicParsing="false">
 <HBox.margin>
  <Insets left="2.5" />
 </HBox.margin>
</Button>

Применено CSS 

#toolbar .button {
    -fx-background-color: #ecf0f1;

    -size: 16px;

    -fx-min-width: -size;
    -fx-min-height: -size;
    -fx-pref-width: -size;
    -fx-pref-height: -size;
}

#exit {
    -fx-shape: "M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z";
}

#max {
    -fx-shape: "M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V192h416v234z";
}

#min {
    -fx-shape: "M480 480H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h448c17.7 0 32 14.3 32 32s-14.3 32-32 32z";
}

1 Ответ

0 голосов
/ 02 сентября 2018

По умолчанию форма масштабируется, чтобы соответствовать области Region, к которой она применяется. Это масштабирование приводит к почти квадратичному виду формы кнопки минимизации. Использование немасштабированной формы также не вариант, так как формы слишком велики для этого.

Используйте -fx-background-insets, чтобы создать правильное соотношение. Кроме того, я рекомендую поместить Region внутри Button в качестве графика и применить форму к этому узлу. Это позволяет добавить фон для кнопки или увеличить хитбокс: 

<Button fx:id="min" mnemonicParsing="false" pickOnBounds="true">
 <HBox.margin>
  <Insets right="2.5" />
 </HBox.margin>
 <graphic>
   <Region styleClass="shape"/>
 </graphic>
</Button>
<Button fx:id="max" mnemonicParsing="false" pickOnBounds="true">
 <HBox.margin>
  <Insets left="2.5" right="2.5" />
 </HBox.margin>
 <graphic>
   <Region styleClass="shape"/>
 </graphic>
</Button>
<Button fx:id="exit" mnemonicParsing="false" pickOnBounds="true">
 <HBox.margin>
  <Insets left="2.5" />
 </HBox.margin>
 <graphic>
   <Region styleClass="shape"/>
 </graphic>
</Button>

#toolbar .button {
    -size: 20px;
    -fx-padding: 2px;
    -fx-background-color: null;

    -fx-min-width: -size;
    -fx-min-height: -size;
    -fx-pref-width: -size;
    -fx-pref-height: -size;
}

#toolbar .button .shape {
    -fx-background-color: #ecf0f1;
}

#toolbar .button:pressed .shape {
    /* different background for pressed button */
    -fx-background-color: lightgreen;
}

#exit .shape {
    -fx-shape: "M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z";
}

#max .shape {
    -fx-shape: "M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V192h416v234z";
}

#min .shape {
    -fx-background-insets: 6px 0 6px 0; /* use proper area for shape */
    -fx-shape: "M480 480H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h448c17.7 0 32 14.3 32 32s-14.3 32-32 32z";
}
...