使用区域
使用 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定义形状的宽度和高度。
找到形状的原始宽度/高度,然后通过将所需的宽度/高度除以原始值来找到缩放因子。
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);
}
}
OUTPUT
附加说明
矢量图形实际上没有大小
好吧,不是真的,您在创建 Shape 时定义的路径实际上定义了矢量图的大小。
例如,我可以使用以下命令创建相同的形状:
M 100 100 L 300 100 L 200 300 z
and
M 10 10 L 30 10 L 20 30 z
但后者比前者小10倍,因此其实际尺寸也小10倍。
如果我们将较小的三角形放大 10 倍,它就会增大并具有相同的大小。