如何在JavaFx中设置svgPath的大小 [英] How to set the size of a svgPath in JavaFx
本文介绍了如何在JavaFx中设置svgPath的大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个包含ListCells的ListView，它包含由SvgPath定义的图标。
私有类CustomCell扩展ListCell<串GT; {
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）;
}
}
}
我希望图标填充列表单元格的高度（约为30px）。但是它总是显示得非常大，并且单元格的大小设置为图标的高度。
即使我设置了列表单元格的大小，图标
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 26 4.61,85.94 277.00,93.00 279.11,86.37 284.67,79.45 289.00,74.00 Z
它是一个我希望以特定大小显示的云（例如30,30）。
但是我找不到如何设置特定大小的方法。
解决方案
使用区域
在使用SVGPath一段时间之后，我发现最好将其设置为Region的形状并在此区域定义min / pref / max大小。这样就不需要使用scaleX / Y因子，这会导致父级大小的布局边界和边界不同。
为实现这一目标，我们需要：
- 定义一个新的区域并将SVGPath设置为形状。
- 定义min /此区域的pref / max大小。
- 设置此区域的背景颜色，将其设置为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;
公共类SVGPathResize扩展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;）;
场景场景=新场景（新StackPane（svgShape），200,200）;
primaryStage.setScene（scene）;
primaryStage.show（）;
}
}
在SVGPath上使用scaleX / Y
您可以使用 scaleX / scaleY 定义Shape的宽度和高度。
找到Shape的原始宽度/高度，然后通过除以所需的比例找到缩放系数宽度/高度除以原始值。
宽度的缩放系数=所需宽度/原始宽度
高度的缩放系数=所需的高度/原始高度
现在，您可以使用此缩放系数来缩放形状为所需的大小。
shape.setScaleX（宽度的缩放系数）;
shape.setScaleY（高度的缩放系数）;
MCVE
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.SVGPath;
import javafx.stage.Stage;
公共类SVGPathResize扩展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）;
调整大小（svg，REQUIRED_WIDTH，REQUIRED_HEIGHT）;
场景场景=新场景（新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倍。 / p>
如果我们将较小的三角形缩放10倍，它将会增长并且大小相同。 / p>
I have a ListView that contains ListCells, which contain an icon defined by a 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);
}
}
}
I want the icon to fill the height of the list cell (which is about 30px). But it´s always shown extremely large, and the size of the cell is set to the height of the icon.
Even if I set the size of the list cell and the icon
public CustomCell()
{
setPrefHeight(30);
setMaxHeight(30);
icon.setContent("...");
icon.maxHeight(30);
icon.prefHeight(30);
}
it doesn´t work. The height of the list cell is correct, but the icon still is shown too large.
Where am I wrong?
EDIT: This is the path of my 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
Its a cloud which I want to show in a specific size (e.g. 30, 30). But I can´t find a way how to set a specific size.
解决方案
Use a Region
After using SVGPath for sometime, I found its best to set it as a shape to a Region and define min/pref/max size on this region. This way their is no need to use the scaleX/Y factors, which leads to a difference in layout bounds and bounds in parent sizes.
To achieve this, we need to:
- Define a new Region and set the SVGPath as the shape.
- Define the min/pref/max size for this region.
- Set a background color for this region which gets set as the fill for the svg shape.
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();
}
}
Use scaleX/Y on SVGPath
You can use the scaleX / scaleY to define the width and height of a Shape.
Find the original width/height of the Shape and then find the scaling factor by dividing the required width/height by the original values.
Scaling factor for width = required width / original width
Scaling factor for height = required height / original height
Now, you can use this scaling factor to scale the shape to the required size.
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);
}
}
OUTPUT
Additional Explanation
A vector graphic actually doesn´t have a size
Well not really, the path that you define while creating a Shape actually defines the size of the vector graph.
For example, I can create the same shape using :
M 100 100 L 300 100 L 200 300 z
and
M 10 10 L 30 10 L 20 30 z
but the latter is 10 times smaller than the former and so its actual size is also 10 times smaller.
If we scale the smaller triangle by a factor of 10, it will grow and be of the same size.
这篇关于如何在JavaFx中设置svgPath的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
