如何在 JavaFX 中调整由多个路径组成的 SVG 元素的大小？

Question

我正在重新设计一个旧的 javafx 应用程序，我需要包含一个 wifi 强度的图标。设计师为此给我发了一个 svg 图标，我认为只保留一个图标并根据所述 wifi 强度为 3 个条使用不同的填充颜色会更聪明。

我找到了一个很好的方法，它工作得很好，直到你需要调整 wifi 图标的大小。似乎即使我更改了-fx-pref-width（或高度，或最小/最大），svg 图标也会保持其大小。 我还尝试一个一个地调整每个 svg 路径的大小，但它只会让它们之间的空间变得混乱。并且以后不能使用独特的形状来调整大小，因为我至少需要 2 种颜色。仅供参考，目标是根据上下文应用 5em 或 3em 大小。

这是我目前拥有的代码，如果您不关心图标大小，一切看起来都很棒：

public class WifiStrengthRegion extends Pane {

    public WifiStrengthRegion() {
        getStyleClass().setAll("wifi-strength");

        SVGPath round = new SVGPath();
        SVGPath bar1 = new SVGPath();
        SVGPath bar2 = new SVGPath();
        SVGPath bar3 = new SVGPath();

        round.setContent("M253.5,336.5c-18.9,0-34.2,15.3-34.2,34.1c0,18.8,15.4,34.1,34.2,34.1c18.9,0,34.2-15.3,34.2-34.1 C287.7,351.8,272.4,336.5,253.5,336.5z");
        bar1.setContent("M337,290.1c-22.3-22.3-51.9-34.5-83.5-34.5c-31.4,0-61,12.2-83.3,34.3c-9,9-9,23.5,0,32.5 c4.4,4.4,10.2,6.8,16.3,6.8c6.2,0,11.9-2.4,16.3-6.7c13.6-13.5,31.6-20.9,50.7-20.9c19.2,0,37.3,7.5,50.8,21 c4.4,4.4,10.2,6.8,16.3,6.8c6.2,0,11.9-2.4,16.3-6.7C346,313.6,346,299,337,290.1z");
        bar2.setContent("M389.3,238c-36.3-36.2-84.5-56.1-135.8-56.1c-51.2,0-99.3,19.9-135.6,55.9c-4.4,4.3-6.8,10.1-6.8,16.3 c0,6.1,2.4,11.9,6.7,16.3c4.4,4.3,10.2,6.7,16.3,6.7c6.2,0,11.9-2.4,16.3-6.7c27.5-27.4,64.1-42.5,103-42.5 c39,0,75.6,15.1,103.1,42.6c4.4,4.4,10.2,6.8,16.3,6.8c6.2,0,12-2.4,16.3-6.7c4.4-4.3,6.8-10.1,6.8-16.3 C396,248.1,393.6,242.3,389.3,238z");
        bar3.setContent("M444.3,183.2c-50.9-50.8-118.7-78.8-190.8-78.8c-72,0-139.7,27.9-190.6,78.6c-9,9-9,23.5,0,32.5 c4.4,4.3,10.2,6.7,16.3,6.7c6.2,0,12-2.4,16.3-6.7c42.2-42,98.3-65.2,158-65.2c59.7,0,115.9,23.2,158.1,65.3 c4.4,4.3,10.2,6.7,16.3,6.7c6.2,0,11.9-2.4,16.3-6.7C453.2,206.7,453.3,192.1,444.3,183.2z");

        round.getStyleClass().add("wifi-base");
        bar1.getStyleClass().add("wifi-bar1");
        bar2.getStyleClass().add("wifi-bar2");
        bar3.getStyleClass().add("wifi-bar3");

        this.getChildren().addAll(round, bar1, bar2, bar3);
    }

    public void setWifiStrength(Integer strength) {
        if (strength == null) {
            setManaged(false);
            setVisible(false);
        } else {
            setManaged(true);
            setVisible(true);
            getStyleClass().removeAll("wifi-excellent", "wifi-good", "wifi-fair", "wifi-weak", "wifi-off");

            if (strength < 0 && strength >= -100) {
                if (strength >= -50) {
                    getStyleClass().add("wifi-excellent");
                } else if (strength >= -70) {
                    getStyleClass().add("wifi-good");
                } else if (strength >= -80) {
                    getStyleClass().add("wifi-fair");
                } else {
                    getStyleClass().add("wifi-weak");
                }
            } else {
                getStyleClass().add("wifi-off");
            }
        }
    }

}

（然后一个 css 样式表将 -fx-fill 应用于每个 .wifi-barX，具体取决于主要元素类）

以下是 svg 图标外观的示例：

我是 Java 的初学者（和 obv JavaFX），所以任何建设性的批评将不胜感激！

Answer 1

如果您只想调整大小（我希望这可行）：

public void resize(SVGPath svg, double width, double height) {
    this.width = width;
    this.height = height;
    double originalWidthR = svg.prefWidth(-1);
    double originalHeightR = svg.prefHeight(originalWidthR);

    double scaleXr = width / originalWidthR;
    double scaleYr = height / originalHeightR;

    svg.setScaleX(scaleXr);
    svg.setScaleY(scaleYr);
}

如果你想设置边界，请使用：

public void setBounds(SVGPath svg, double width, double height, double x, double y) {
    this.width = width;
    this.height = height;
    double originalWidthR = svg.prefWidth(-1);
    double originalHeightR = svg.prefHeight(originalWidthR);

    double scaleXr = width / originalWidthR;
    double scaleYr = height / originalHeightR;

    svg.setScaleX(scaleXr);
    svg.setScaleY(scaleYr);
    
    svg.setLayoutX((originalWidthR - width) + x);
    svg.setLayoutY((originalHeightR - height) + y);
}