如何调整包含svg图像的按钮

我想在按钮内放置一个svg图像，然后我希望能够将按钮的大小调整为任意大小。

首先，这是我在按钮内加载和放置svg图像的方法：

SVGPath svg = new SVGPath(); svg.setContent("M87.5,50.002C87.5,29.293,70.712,12.5,50,12.5c-20.712,0-37.5,16.793-37.5,37.502C12.5,70.712,29.288,87.5,50,87.5 c6.668,0,12.918-1.756,18.342-4.809c0.61-0.22,1.049-0.799,1.049-1.486c0-0.622-0.361-1.153-0.882-1.413l0.003-0.004l-6.529-4.002 L61.98,75.79c-0.274-0.227-0.621-0.369-1.005-0.369c-0.238,0-0.461,0.056-0.663,0.149l-0.014-0.012 C57.115,76.847,53.64,77.561,50,77.561c-15.199,0-27.56-12.362-27.56-27.559c0-15.195,12.362-27.562,27.56-27.562 c14.322,0,26.121,10.984,27.434,24.967C77.428,57.419,73.059,63,69.631,63c-1.847,0-3.254-1.23-3.254-3.957 c0-0.527,0.176-1.672,0.264-2.111l4.163-19.918l-0.018,0c0.012-0.071,0.042-0.136,0.042-0.21c0-0.734-0.596-1.33-1.33-1.33h-7.23 c-0.657,0-1.178,0.485-1.286,1.112l-0.025-0.001l-0.737,3.549c-1.847-3.342-5.629-5.893-10.994-5.893 c-10.202,0-19.877,9.764-19.877,21.549c0,8.531,5.101,14.775,13.632,14.775c4.75,0,9.587-2.727,12.665-7.035l0.088,0.527 c0.615,3.342,9.843,7.576,15.121,7.576c7.651,0,16.617-5.156,16.617-19.932l-0.022-0.009C87.477,51.13,87.5,50.569,87.5,50.002z M56.615,56.844c-1.935,2.727-5.101,5.805-9.763,5.805c-4.486,0-7.212-3.166-7.212-7.738c0-6.422,5.013-12.754,12.049-12.754 c3.958,0,6.245,2.551,7.124,4.486L56.615,56.844z"); Button button = new Button(); button.setGraphic(svg); 

我已经尝试将SVGPath放在Group对象中，然后我缩放了Group，就像这样：

 Group graphics = new Group(); graphics.getChildren().add(svg); graphics.getTransforms().add(new Scale(0.2, 0.2, 0 , 10)); Button button = new Button(); button.setGraphic(graphics); 

这确实改变了svg图像的大小。 问题是按钮的大小不会相应改变。 它的大小与图像从未重新缩放的大小相同。 如果我设置按钮的最大尺寸并不重要。 我只能让按钮更大，但不能更小。

关于在JavaFx中使用SVG图像的文档似乎非常有限，所以如果有人能帮助我，那将非常感激。

更新： @ItachiUchiha指出我可以使用setScaleX(..) and setScaleY（..）重新调整按钮，内部的svg图像将重新调整。 但是，这样做似乎并没有改变按钮的size属性。 这意味着包含按钮的窗格仍将占用相同的空间，就像按钮未重新缩放一样。 在窗格上设置最大大小没有帮助。 此外，setScaleY和X方法重新调整所有按钮，包括按钮的边框。 这使按钮与包含纯文本的按钮的外观相同。 我的窗格将包含带有svg内容的按钮和带有纯文本内容的按钮，除了内容外，它们应该看起来都一样。

更新2： @ ItachiUchiha编辑的回复使一切都清楚。 标记为答案。

Answer 1

SVG图像可以自行resize并适合其容器。 您可以重新调整按钮的大小，SVG图像将适合其边界。

 Button button = new Button(); button.setGraphic(svg); // Re-size the button button.setScaleX(0.5); button.setScaleY(0.5); 

---

编辑 – 根据父级调整按钮大小。

如果要根据父级重新调整按钮大小，还要根据它缩放图像。 您可以将图像的缩放属性绑定到Button的高度和宽度。 每当父级的大小发生变化时，也要更改按钮的prefSize。

 import javafx.application.Application; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.HBox; import javafx.scene.shape.SVGPath; import javafx.stage.Stage; public class Main extends Application{ private final int MIN_BUTTON_SIZE = 10; public static void main(String[] args) { launch(args); } @Override public void start(Stage primaryStage) throws Exception { HBox root = new HBox(); root.setAlignment(Pos.CENTER); SVGPath svg = new SVGPath(); svg.setContent("M87.5,50.002C87.5,29.293,70.712,12.5,50,12.5c-20.712,0-37.5,16.793-37.5,37.502C12.5,70.712,29.288,87.5,50,87.5" + "c6.668,0,12.918-1.756,18.342-4.809c0.61-0.22,1.049-0.799,1.049-1.486c0-0.622-0.361-1.153-0.882-1.413l0.003-0.004l-6.529-4.002" + "L61.98,75.79c-0.274-0.227-0.621-0.369-1.005-0.369c-0.238,0-0.461,0.056-0.663,0.149l-0.014-0.012" + "C57.115,76.847,53.64,77.561,50,77.561c-15.199,0-27.56-12.362-27.56-27.559c0-15.195,12.362-27.562,27.56-27.562" + "c14.322,0,26.121,10.984,27.434,24.967C77.428,57.419,73.059,63,69.631,63c-1.847,0-3.254-1.23-3.254-3.957" + "c0-0.527,0.176-1.672,0.264-2.111l4.163-19.918l-0.018,0c0.012-0.071,0.042-0.136,0.042-0.21c0-0.734-0.596-1.33-1.33-1.33h-7.23" + "c-0.657,0-1.178,0.485-1.286,1.112l-0.025-0.001l-0.737,3.549c-1.847-3.342-5.629-5.893-10.994-5.893" + "c-10.202,0-19.877,9.764-19.877,21.549c0,8.531,5.101,14.775,13.632,14.775c4.75,0,9.587-2.727,12.665-7.035l0.088,0.527" + "c0.615,3.342,9.843,7.576,15.121,7.576c7.651,0,16.617-5.156,16.617-19.932l-0.022-0.009C87.477,51.13,87.5,50.569,87.5,50.002z" + "M56.615,56.844c-1.935,2.727-5.101,5.805-9.763,5.805c-4.486,0-7.212-3.166-7.212-7.738c0-6.422,5.013-12.754,12.049-12.754" + "c3.958,0,6.245,2.551,7.124,4.486L56.615,56.844z"); Button buttonWithGraphics = new Button(); buttonWithGraphics.setGraphic(svg); // Bind the Image scale property to the buttons size svg.scaleXProperty().bind(buttonWithGraphics.widthProperty().divide(100)); svg.scaleYProperty().bind(buttonWithGraphics.heightProperty().divide(100)); // Declare a minimum size for the button buttonWithGraphics.setMinSize(MIN_BUTTON_SIZE, MIN_BUTTON_SIZE); root.getChildren().addAll(buttonWithGraphics); root.layoutBoundsProperty().addListener((observableValue, oldBounds, newBounds) -> { double size = Math.max(MIN_BUTTON_SIZE, Math.min(newBounds.getWidth(), newBounds.getHeight())); buttonWithGraphics.setPrefSize(size, size); } ); Scene scene = new Scene(root); primaryStage.setScene(scene); primaryStage.show(); } } 

中心图像是默认大小 ，因此这可以减少和增加按钮大小。

注意 – 您可以计算和使用按钮高度和宽度的不同值。