Skip to content

Instantly share code, notes, and snippets.

@aoetk
Last active August 29, 2015 14:02
Show Gist options
  • Save aoetk/b5b9a03e1033057224aa to your computer and use it in GitHub Desktop.
Save aoetk/b5b9a03e1033057224aa to your computer and use it in GitHub Desktop.
JavaFXでSVGアイコンを使ったボタンのサンプル
.button-icon-shape {
-fx-scale-x: 2.0;
-fx-scale-y: 2.0;
}
.stop-button-icon {
-fx-fill: black;
}
.circle-button {
-fx-pref-width: 4.0em;
-fx-pref-height: 4.0em;
-fx-background-radius: 2.0em;
-fx-background-color: null;
-fx-border-radius: 2.0em;
-fx-border-color: black;
-fx-border-width: 2.0px;
}
.circle-button:disabled {
-fx-border-color: rgb(0, 0, 0, 0.7);
}
.circle-button:hover {
-fx-background-color: #dcdcdc;
}
.circle-button:pressed {
-fx-background-color: black;
-fx-border-color: white;
}
.circle-button:pressed SVGPath {
-fx-fill: white;
}
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.shape.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" stylesheets="@ShapeTest.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<Button contentDisplay="GRAPHIC_ONLY" layoutX="55.0" layoutY="51.0" mnemonicParsing="false" styleClass="circle-button">
<graphic>
<SVGPath content="M7,2.019V0L3,3l4,3V4.027c2.25,0.249,4,2.156,4,4.473 c0,2.485-2.015,4.5-4.5,4.5S2,10.985,2,8.5C2,8.331,2.01,8.164,2.027,8H0.019C0.007,8.165,0,8.332,0,8.5C0,12.09,2.91,15,6.5,15 S13,12.09,13,8.5C13,5.078,10.356,2.274,7,2.019z" styleClass="button-icon-shape" />
</graphic>
</Button>
<Button layoutX="162.0" layoutY="51.0" mnemonicParsing="false" styleClass="circle-button">
<graphic>
<SVGPath content="M10,16 10,0 0,8z" styleClass="button-icon-shape" />
</graphic>
</Button>
<Button layoutX="270.0" layoutY="51.0" mnemonicParsing="false" styleClass="circle-button">
<graphic>
<SVGPath content="M 0,16 0,0 10,8 z" styleClass="button-icon-shape" />
</graphic>
</Button>
<Button layoutX="381.0" layoutY="51.0" mnemonicParsing="false" styleClass="circle-button">
<graphic>
<SVGPath content="M 12.055,8.021 16.035,4.024 12.016,0.001 8.025,3.991 4.037,0 0,3.992 4.008,8.009 0.016,12 l 4.016,4.079 4.011,-4.028 4.003,4.013 4.004,-4.044 z" styleClass="button-icon-shape" />
</graphic>
</Button>
</children>
</AnchorPane>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment