如何解决如何在 JavaFX 中调整由多个路径组成的 SVG 元素的大小?
我正在重新设计一个旧的 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,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,32.5 c4.4,4.4,10.2,6.8,16.3,6.8c6.2,11.9-2.4,16.3-6.7c13.6-13.5,31.6-20.9,50.7-20.9c19.2,37.3,7.5,50.8,21 c4.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,6.7c6.2,16.3-6.7c27.5-27.4,64.1-42.5,103-42.5 c39,75.6,15.1,103.1,42.6c4.4,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,16.3-6.7c42.2-42,98.3-65.2,158-65.2c59.7,115.9,23.2,158.1,65.3 c4.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)的初学者,所以任何建设性的批评将不胜感激!
解决方法
如果你只想调整大小(我希望这有效):
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 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);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。