使用 CSS -fx-shape 绘制区域。怎么可能？

Question

我正在寻找一种在区域中绘制形状的方法（JavaFX8）

我见过一些像这样设置区域样式的示例：

-fx-shape            : "M 3.0313 0 L 0 74 L 7.9688 74 L 4.9375 0 L 3.0313 0 Z";

谁能解释一下这个字符串的含义吗？

有没有办法使用可视化软件创建这种类型的字符串？

Answer 1

形状字符串是一个 SVG 路径。

注意区域的形状字符串是区域的形状，而不是区域中的形状。如果您想根据放置在区域中的路径创建形状，请使用 SVGPath 而不是 Region。

您可以使用 SVG 编辑器创建 SVG 路径。

推荐特定的 SVG 编辑器不是 StackOverflow 的主题，尝试 Google 一下，你可能会找到 Inkscape（以及它的选项

Path | Object to Path

）。

Answer 2

要深入了解 JavaFX CSS 的工作原理，我强烈建议使用 Oracle 的 JavaFX CSS 参考指南。

关于

-fx-shape

属性，JavaFX CSS 参考指南指出该属性仅适用于

Region

对象及其子类。

与

-fx-shape

一起用于

Region

所需的最重要的 JavaFX CSS 属性是

-fx-background-color

，它定义用于填充形状的颜色。

如果您定义以下 Java FX CSS 类（

-fx-position-shape

和

-fx-scale-shape

默认为

true

，因此无需定义这些）：

.my-class {
    -fx-background-color: red;
    -fx-shape: "M 33.22656,4.88086 19.9414,21.228516 10.31445,15.714844 0,27.251953 1.49023,28.583985 10.72656,18.25586 20.42187,23.808594 34.77734,6.142578 Z m 1.8,-0.66836 -1.07812,0.410157 -10.41406,3.972656 9.55468,7.763672 z";
}

然后将此 CSS 类分配给您的区域 (

Pane

扩展

Region

):

Pane pane = new Pane();
pane.getStyleClass().add("my-class");

并确保其大小正确，JavaFX 将以红色呈现箭头，居中并缩放以适合该区域，因此：

Inkscape 的 XML 编辑器（菜单选项

Edit | XML Editor

）非常适合提取 SVG 路径以粘贴到样式表文档中。在使用此功能之前，正如上面的答案中已经提到的，您可能需要使用

Path | Object to Path

菜单选项

将任何对象（例如直线或椭圆）转换为路径

W3C 的 SVG Paths 文档 详细描述了 SVG Paths 的格式。