如何将JavaFX节点导出到SVG映像？

Question

换句话说，我正在尝试用JavaFX做一些事情，就像蜡染允许你用Swing做的事情一样。

我希望能够在我的 JavaFX UI 中捕获任意节点的外观，就像 Node.snapshot（） 一样，除了我需要像 SVG 这样的矢量格式的图像，而不是光栅图像。（将节点的光栅快照插入到SVG图像中是不够的，它需要是一个适当的，可缩放的矢量图像。

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

有人知道有没有办法做到这一点？我希望在JavaFX中实现的事情可能吗？

Answer 1

在JIRA JFX有一个公开的bug请求

https://javafx-jira.kenai.com/browse/RT-38559

（需要注册；您可以投票表决）。它目前说：

考虑未来的版本。

并且被标记为版本9。

Answer 2

有一个简单的JavaFX形状到SVG字符串的转换器，它将只转换基本形状而不应用css，而不是任意节点，但也许这就是你所需要的。

Answer 3

我开始编写一个JavaFx Node到SVG转换器，它从Gerrit Grunwald“扩展”ShapeConverter，它只转换Shape几何形状：

https://github.com/stefaneidelloth/JavaFxNodeToSvg

…在一定程度的挫败之后停止了。

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

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

相应的svg文件可从以下网址获得:

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

一些进一步的注意事项

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

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

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

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

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

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

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

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