如何调整包含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图像将重新调整它。但是，这样做似乎并没有改变按钮的size属性。这意味着包含按钮的窗格仍将占用相同的空间，就像按钮未重新缩放一样。在窗格上设置最大大小没有帮助。此外，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 - To resize buttons according to the parent.

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

NB - 您可以计算和使用不同的按钮高度和宽度值。

这篇关于如何调整包含svg图像的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！