带有 svg 的 JavaFX 按钮

Question

我有这个 SVG:

M421.985,229.833L217.847,25.981c-7.235-7.238-16.94-13.374-29.121-18.416C176.541,2.522,165.407,0,155.318,0H36.547 C26.648,0,18.083,3.619,10.85,10.848C3.617,18.081,0.002,26.646,0.002,36.545v118.771c0,10.088,2.519,21.219,7.564,33.404   s11.182,21.792,18.417,28.837L230.118,421.98c7.043,7.043,15.602,10.564,25.697,10.564c9.89,0,18.558-3.521,25.98-10.564   l140.186-140.47c7.043-7.046,10.561-15.604,10.561-25.693C432.542,245.919,429.024,237.258,421.985,229.833z M117.202,117.201   c-7.142,7.138-15.752,10.709-25.841,10.709c-10.085,0-18.699-3.571-25.837-10.709c-7.138-7.139-10.706-15.749-10.706-25.837   c0-10.089,3.568-18.702,10.706-25.837c7.139-7.139,15.752-10.71,25.837-10.71c10.089,0,18.702,3.571,25.841,10.71   c7.135,7.135,10.706,15.749,10.706,25.837C127.908,101.452,124.341,110.062,117.202,117.201z

它是从这里复制的: http://www.flaticon.com/free-icon/tag-black-shape_25679#term=label&page=1&position=56

我需要一些组件(很可能是一个按钮)，它具有这种形状，大小为 24x24 并且对悬停有一些影响(如渐变)。

在 JavaFX 中，这甚至可能吗？ CSS 边框属性不适用于缩放，SVG 无法缩放，我只是无法满足所有这些要求。

Answer 1

您可以将 SVG 用作 Region 的形状.根据您的需要此 Region可能是 Button本身或 graphic分配给它:
Button只要

Button btn = new Button();
btn.getStyleClass().add("icon-button");
btn.setPickOnBounds(true);

CSS 样式表

.icon-button {
    -icon-paint: red;
    -fx-background-color: -icon-paint;
    -size: 24;
    -fx-min-height: -size;
    -fx-min-width: -size;
    -fx-max-height: -size;
    -fx-max-width: -size;

    -fx-shape: "M421.985,229.833L217.847,25.981c-7.235-7.238-16.94-13.374-29.121-18.416C176.541,2.522,165.407,0,155.318,0H36.547 C26.648,0,18.083,3.619,10.85,10.848C3.617,18.081,0.002,26.646,0.002,36.545v118.771c0,10.088,2.519,21.219,7.564,33.404   s11.182,21.792,18.417,28.837L230.118,421.98c7.043,7.043,15.602,10.564,25.697,10.564c9.89,0,18.558-3.521,25.98-10.564   l140.186-140.47c7.043-7.046,10.561-15.604,10.561-25.693C432.542,245.919,429.024,237.258,421.985,229.833z M117.202,117.201   c-7.142,7.138-15.752,10.709-25.841,10.709c-10.085,0-18.699-3.571-25.837-10.709c-7.138-7.139-10.706-15.749-10.706-25.837   c0-10.089,3.568-18.702,10.706-25.837c7.139-7.139,15.752-10.71,25.837-10.71c10.089,0,18.702,3.571,25.841,10.71   c7.135,7.135,10.706,15.749,10.706,25.837C127.908,101.452,124.341,110.062,117.202,117.201z";
}

.icon-button:hover {
    -icon-paint: linear-gradient(to bottom, red, black);
}

Button与 graphic

Button btn = new Button();
btn.getStyleClass().add("icon-button");
btn.setPickOnBounds(true);

Region icon = new Region();
icon.getStyleClass().add("icon");
btn.setGraphic(icon);

CSS 样式表

.icon-button {
    -icon-paint: red;
    -fx-content-display: graphic-only;

    -icon-paint: red;
}

.icon-button:hover {
    -icon-paint: linear-gradient(to bottom, red, black);
}

.icon-button .icon {
    -fx-background-color: -icon-paint;
    -size: 24;
    -fx-min-height: -size;
    -fx-min-width: -size;
    -fx-max-height: -size;
    -fx-max-width: -size;

    -fx-shape: "M421.985,229.833L217.847,25.981c-7.235-7.238-16.94-13.374-29.121-18.416C176.541,2.522,165.407,0,155.318,0H36.547 C26.648,0,18.083,3.619,10.85,10.848C3.617,18.081,0.002,26.646,0.002,36.545v118.771c0,10.088,2.519,21.219,7.564,33.404   s11.182,21.792,18.417,28.837L230.118,421.98c7.043,7.043,15.602,10.564,25.697,10.564c9.89,0,18.558-3.521,25.98-10.564   l140.186-140.47c7.043-7.046,10.561-15.604,10.561-25.693C432.542,245.919,429.024,237.258,421.985,229.833z M117.202,117.201   c-7.142,7.138-15.752,10.709-25.841,10.709c-10.085,0-18.699-3.571-25.837-10.709c-7.138-7.139-10.706-15.749-10.706-25.837   c0-10.089,3.568-18.702,10.706-25.837c7.139-7.139,15.752-10.71,25.837-10.71c10.089,0,18.702,3.571,25.841,10.71   c7.135,7.135,10.706,15.749,10.706,25.837C127.908,101.452,124.341,110.062,117.202,117.201z";
}

结果


Button与 graphic形状如左图所示， Button直接应用到它的形状如右图所示。

编辑:要组合多个路径，您可以组合多个 SVGPath s

更新

对于更复杂的图标 SVGPath s 可以组合用作 graphic对于按钮:

private static SVGPath createPath(String d, String fill, String hoverFill) {
    SVGPath path = new SVGPath();
    path.getStyleClass().add("svg");
    path.setContent(d);
    path.setStyle("-fill:" + fill + ";-hover-fill:"+hoverFill+';');
    return path;
}

Group svg = new Group(
        createPath("M0,0h100v100h-100z", "red", "darkred"),
        createPath("M20,20h60v60h-60z", "blue", "darkblue")
);

Bounds bounds = svg.getBoundsInParent();
double scale = Math.min(20/bounds.getWidth(), 20 / bounds.getHeight());
svg.setScaleX(scale);
svg.setScaleY(scale);

Button btn = new Button();
btn.setGraphic(svg);
btn.setMaxSize(30, 30);
btn.setMinSize(30, 30);
btn.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);

CSS

.button .svg {
    -fx-fill: -fill;
}

.button:hover .svg {
    -fx-fill: -hover-fill;
}