【问题标题】：How to set the size of a svgPath in JavaFx如何在 JavaFx 中设置 svgPath 的大小
【发布时间】：2016-12-21 14:10:05
【问题描述】：

我有一个包含 ListCells 的 ListView，其中包含一个由 SvgPath 定义的图标。

private class CustomCell extends ListCell<String> {
    private SVGPath icon = new SVGPath();

    public CustomCell() {
        icon.setContent("...");
    }

    @Override
    public void updateItem(String value, boolean empty) {
        super.updateItem(value, empty);
        if(empty || value == null) {
            setGraphic(null);
            setText(null);
        } else {
            setGraphic(icon);
            setText(value);
        }
    }
}

我希望图标填充列表单元格的高度（大约 30 像素）。但它总是显示得非常大，并且单元格的大小设置为图标的高度。

即使我设置了列表单元格和图标的大小

public CustomCell()
{
    setPrefHeight(30);
    setMaxHeight(30);
    icon.setContent("...");
    icon.maxHeight(30);
    icon.prefHeight(30);
}

它不起作用。列表单元格的高度是正确的，但图标仍然显示太大。

我哪里错了？

编辑：这是我的 svg 的路径：

M 289.00,74.00 C 299.18,61.21 307.32,52.80 320.00,42.42 331.43,33.07 343.66,26.03 357.00,19.84 427.64,-12.98 509.92,2.91 564.42,58.28 583.93,78.10 595.94,99.15 605.58,125.00 607.76,130.86 611.37,144.75 612.54,151.00 613.15,154.23 613.28,160.06 615.58,162.44 617.49,164.42 624.11,165.84 627.00,166.86 634.80,169.62 639.97,172.04 647.00,176.42 673.69,193.07 692.76,221.39 695.83,253.00 700.60,302.03 676.64,345.41 630.00,364.00 621.17,367.52 608.48,370.99 599.00,371.00 599.00,371.00 106.00,371.00 106.00,371.00 96.50,370.99 87.00,368.97 78.00,366.00 36.29,352.22 6.21,312.25 6.00,268.00 5.77,219.90 34.76,179.34 81.00,165.02 96.78,160.14 107.02,161.00 123.00,161.00 124.59,150.68 130.49,137.79 136.05,129.00 150.70,105.88 173.22,88.99 200.00,82.65 213.13,79.55 219.79,79.85 233.00,80.00 247.37,80.17 264.61,85.94 277.00,93.00 279.11,86.37 284.67,79.45 289.00,74.00 Z

它是我想以特定大小（例如 30、30）显示的云。但我找不到如何设置特定尺寸的方法。

【问题讨论】：

JavaFX - How to resize a SVG Path right in a TableView 展示了如何使用组来包装 SVGPath 以减小其大小。
谢谢。但不知何故，它对我不起作用。图标不可见。
如果您可以在您的问题中添加 MCVE 以更好地帮助您，则可能是这样。
MCVE 是什么意思？

标签： java svg javafx

【解决方案1】：

使用区域

在使用 SVGPath 一段时间后，我发现最好将其设置为区域的形状并在该区域上定义最小/首选项/最大大小。这样他们就不需要使用 scaleX/Y 因子，这会导致布局边界和父尺寸边界的差异。

为此，我们需要：

定义一个新区域并将 SVGPath 设置为形状。
定义此区域的最小/首选/最大大小。
为此区域设置背景颜色，该区域将设置为 svg 形状的填充。

MCVE

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Region;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.SVGPath;
import javafx.stage.Stage;

public class SVGPathResize extends Application {

    private static final double REQUIRED_WIDTH = 50.0;
    private static final double REQUIRED_HEIGHT = 30.0;

    @Override
    public void start(Stage primaryStage) throws Exception {
        SVGPath svg = new SVGPath();
        svg.setContent("M 289.00,74.00 C 299.18,61.21 307.32,52.80 320.00,42.42 331.43,33.07 343.66,26.03 357.00,19.84 427.64,-12.98 509.92,2.91 564.42,58.28 583.93,78.10 595.94,99.15 605.58,125.00 607.76,130.86 611.37,144.75 612.54,151.00 613.15,154.23 613.28,160.06 615.58,162.44 617.49,164.42 624.11,165.84 627.00,166.86 634.80,169.62 639.97,172.04 647.00,176.42 673.69,193.07 692.76,221.39 695.83,253.00 700.60,302.03 676.64,345.41 630.00,364.00 621.17,367.52 608.48,370.99 599.00,371.00 599.00,371.00 106.00,371.00 106.00,371.00 96.50,370.99 87.00,368.97 78.00,366.00 36.29,352.22 6.21,312.25 6.00,268.00 5.77,219.90 34.76,179.34 81.00,165.02 96.78,160.14 107.02,161.00 123.00,161.00 124.59,150.68 130.49,137.79 136.05,129.00 150.70,105.88 173.22,88.99 200.00,82.65 213.13,79.55 219.79,79.85 233.00,80.00 247.37,80.17 264.61,85.94 277.00,93.00 279.11,86.37 284.67,79.45 289.00,74.00 Z");
        final Region svgShape = new Region();
        svgShape.setShape(svg);
        svgShape.setMinSize(REQUIRED_WIDTH, REQUIRED_HEIGHT);
        svgShape.setPrefSize(REQUIRED_WIDTH, REQUIRED_HEIGHT);
        svgShape.setMaxSize(REQUIRED_WIDTH, REQUIRED_HEIGHT);
        svgShape.setStyle("-fx-background-color: black;");
        Scene scene = new Scene(new StackPane(svgShape), 200, 200);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

在 SVGPath 上使用 scaleX/Y

您可以使用 scaleX / scaleY 来定义 Shape 的宽度和高度。 p>

找到 Shape 的原始宽度/高度，然后通过将所需宽度/高度除以原始值来找到缩放因子。

Scaling factor for width = required width / original width

Scaling factor for height = required height / original height

现在，您可以使用此缩放因子将形状缩放到所需的大小。

shape.setScaleX(Scaling factor for width);
shape.setScaleY(Scaling factor for height);

MCVE

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.SVGPath;
import javafx.stage.Stage;

public class SVGPathResize extends Application {

    private static final double REQUIRED_WIDTH = 50.0;
    private static final double REQUIRED_HEIGHT = 30.0;

    @Override
    public void start(Stage primaryStage) throws Exception {
        SVGPath svg = new SVGPath();
        svg.setContent("M 289.00,74.00 C 299.18,61.21 307.32,52.80 320.00,42.42 331.43,33.07 343.66,26.03 357.00,19.84 427.64,-12.98 509.92,2.91 564.42,58.28 583.93,78.10 595.94,99.15 605.58,125.00 607.76,130.86 611.37,144.75 612.54,151.00 613.15,154.23 613.28,160.06 615.58,162.44 617.49,164.42 624.11,165.84 627.00,166.86 634.80,169.62 639.97,172.04 647.00,176.42 673.69,193.07 692.76,221.39 695.83,253.00 700.60,302.03 676.64,345.41 630.00,364.00 621.17,367.52 608.48,370.99 599.00,371.00 599.00,371.00 106.00,371.00 106.00,371.00 96.50,370.99 87.00,368.97 78.00,366.00 36.29,352.22 6.21,312.25 6.00,268.00 5.77,219.90 34.76,179.34 81.00,165.02 96.78,160.14 107.02,161.00 123.00,161.00 124.59,150.68 130.49,137.79 136.05,129.00 150.70,105.88 173.22,88.99 200.00,82.65 213.13,79.55 219.79,79.85 233.00,80.00 247.37,80.17 264.61,85.94 277.00,93.00 279.11,86.37 284.67,79.45 289.00,74.00 Z");
        resize(svg, REQUIRED_WIDTH, REQUIRED_HEIGHT);
        Scene scene = new Scene(new StackPane(svg), 200, 200);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private void resize(SVGPath svg, double width, double height) {

        double originalWidth = svg.prefWidth(-1);
        double originalHeight = svg.prefHeight(originalWidth);

        double scaleX = width / originalWidth;
        double scaleY = height / originalHeight;

        svg.setScaleX(scaleX);
        svg.setScaleY(scaleY);
    }
}

输出

补充说明

矢量图形实际上没有大小

不是真的，您在创建 Shape 时定义的路径实际上定义了矢量图的大小。

例如，我可以使用以下方法创建相同的形状：

 M 100 100 L 300 100 L 200 300 z

和

M 10 10 L 30 10 L 20 30 z

但后者比前者小 10 倍，所以它的实际大小也小了 10 倍。

如果我们将较小的三角形缩放 10 倍，它会变大并且大小相同。

【讨论】：

非常感谢！我还没有时间在我的应用程序中实现它，但它看起来很有希望。但是这个解决方案“感觉不对”。矢量图形实际上没有大小。所以它实际上没有意义，计算一个比例因子来缩小它。我认为 Java API 在这一点上设计得并不好。
我添加了解释矢量图大小的信息。
在您的区域示例中，您使用-fx-background-color 设置填充颜色，但如果我想更改线条颜色怎么办？通常我会为此使用-fx-stroke，但它似乎不适用于区域。