java - 如何将 JavaFX 节点导出为 SVG 图像？

Question

换句话说，我正在尝试用 JavaFX 做一些事情，比如 Batik allows you to do with Swing.。

我希望能够在我的 JavaFX UI 中捕获任意节点的外观，很像 Node.snapshot()确实如此，除了我需要像 SVG 这样的 vector 格式的图像，而不是光栅图像。 (将我的节点的光栅快照插入 SVG 图像还不够好；它需要是合适的、可缩放的 vector 图像。)

这是一个长期项目，所以我什至愿意去实现我自己的 GraphicsContext ，或 JavaFX 的保留模式 API 中的任何等效项。

有谁知道有没有办法做到这一点？我希望在 JavaFX 中实现什么？

Answer 1

我开始编写一个 JavaFx 节点到 SVG 转换器，它“扩展”了 Gerrit Grunwald 的 ShapeConverter，它只转换形状几何:

https://github.com/stefaneidelloth/JavaFxNodeToSvg

...并在一定程度的挫败感后停止了它。

请随时改进它，添加功能并修复错误。

该转换器适用于简单的节点示例，但不适用于图表等高级示例。我失败的转换器可能会成为你的起点。当前状态如下图所示。左侧显示原始 JavaFx 节点，右侧显示生成的 svg 输出。

简单节点示例(有效):

图表示例(不起作用):

相应的 svg 文件可在此处获得:

https://github.com/stefaneidelloth/JavaFxNodeToSvg/tree/master/output

一些进一步的说明

除了上面的图表示例说明的定位问题之外，还必须考虑一些其他问题:

JavaFx 提供了比 SVG 标准元素更多的 css 功能。例如，(矩形)JavaFx 区域可以为四个边框线中的每一个都具有单独的线条样式。这样的区域不能简单地转换为 SVG 矩形。相反，Region 的四条边界线需要单独绘制。此外，这种边界线的每一端可以具有两个单独的边缘半径:垂直半径和水平半径。为了将“四个”边界线转换为相应的 SVG 线……可能需要进一步拆分边界线:为四个边界线中的每一个绘制两个圆形部分和一个直线部分。因此，在某些情况下，可能有 12 个 SVG 路径元素来绘制单个 JavaFx 区域的边界。此外，区域的背景填充可以具有与区域边界不同的半径。绘制区域的背景可能需要更多的 SVG 元素。因此，即使是“矩形区域”的转换也会变得相当复杂。

另请注意，JavaFx 节点可能是动画的。例如，一条线的不透明度在开始时为 0，几毫秒后逐渐变为另一个值。

FadeTransition ft = new FadeTransition(Duration.millis(250), borderline);
                    ft.setToValue(0);                       
                    ft.play();

因此，只有在禁用动画的情况下转换节点或等到节点处于稳定状态时才有意义。

如果有一天 JavaFx 图表的转换成功，我会非常高兴，这样我就可以在我的一个项目中使用 JavaFx 绘图和 SVG 导出。

我决定暂时停止转换器的开发，转而使用 JavaScript 库 (d3) 研究绘图和 SVG 导出。如果该策略变得更糟，我可能会回到 JavaFxNodeToSvgConverter。

编辑 使用 d3.js 绘图效果很好，我决定不使用 JavaFx 来创建绘图/svg。 https://github.com/stefaneidelloth/javafx-d3