如何调整包含 svg 图像的按钮的大小 [英] How to resize button containing svg image
问题描述
我想在按钮内放置一个 svg 图像，然后我希望能够将按钮调整为任意大小.
I want to place a svg image inside a button, and then I want to be able to resize the button to any size.
首先，这是我在按钮内加载和放置 svg 图像的方式:
First, this is how I've done the loading and placing of the svg image inside the button:
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，如下所示:
I've tried putting the SVGPath inside a Group object, and then I've scaled that Group, like this:
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 图像的大小.问题是按钮的大小不会相应地改变.它的大小与图像从未重新缩放过一样.我是否设置了按钮的最大大小并不重要.我只能让按钮变大，但不能变小.
And that does change the size of the svg image. The problem is that the size of the button doesn't change accordingly. It has the same size as if the image was never rescaled. It doesn't matter if I set the max size of the button. I can only make the button bigger, but not smaller.
关于在 JavaFx 中使用 SVG 图像的文档似乎非常有限，所以如果有人能帮助我，我将不胜感激.
There seems to be very limited documentation on using SVG images in JavaFx, so if anyone could help me out that would be greatly appreciated.
更新:@ItachiUchiha 指出我可以使用 setScaleX(..) 和setScaleY(..) 重新缩放按钮，然后里面的 svg 图像就会得到用它重新调整.但是，这样做似乎不会改变按钮的大小属性.这意味着包含按钮的窗格仍将占据与按钮未重新缩放相同的空间.在窗格上设置最大尺寸也无济于事.此外，setScaleY 和 X 方法重新缩放所有按钮，包括按钮的边框.这为按钮提供了不同于包含纯文本的按钮的外观.我的窗格将包含带有 svg 内容的按钮和带有纯文本内容的按钮，并且除了它们的内容外，它们看起来应该是一样的.
Update: @ItachiUchiha pointed out that I can just rescale the button using setScaleX(..) andsetScaleY(..), and the svg image inside will get rescaled with it. However, doing this doesn't seem to change the size property of the button. This means that the pane containing the button will still occupy the same space as if the button wasn't rescaled. And setting a max size on the pane doesn't help. In addition, the setScaleY and X methods rescales all of the button, including the borders of the button. This gives the button another appearance than buttons containing plain text. My pane will contain both buttons with svg content and buttons with plain text content, and they should all look the same apart from their content.
更新 2:@ItachiUchiha 编辑后的回复使一切变得清晰.标记为答案.
Update 2: @ItachiUchiha's edited response made everything clear. Marked as the answer.
推荐答案
SVG 图像可以自行调整大小并适合其容器.您可以重新调整按钮大小，SVG 图像将适合其边界.
SVG images can be re-size themselves and fit its container. You can re-size the button and the SVG image will fit its boundary.
Button button = new Button();
button.setGraphic(svg);
// Re-size the button
button.setScaleX(0.5);
button.setScaleY(0.5);
<小时>
EDIT - 根据父级调整按钮大小.
EDIT - To resize buttons according to the parent.
如果您想根据父级重新调整按钮大小并根据它缩放图像.您可以将图像的 scale 属性绑定到 Button 的高度和宽度.每当 Parent 的大小发生变化时，也要更改按钮的 prefSize.
If you want to re-size button according to the Parent and also scale the image according to it. You can bind the scale Property of the image to the height and width of the Button. Whenever the size of the Parent changes, change the button's prefSize as well.
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();
}
}
中央图像是默认尺寸，因此这适用于减小和增大按钮尺寸.
The central image is the default size, so this works on decreasing as well as increasing the Button size.
注意 - 您可以计算和使用不同的按钮高度和宽度值.
这篇关于如何调整包含 svg 图像的按钮的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
