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

Question

换句话说,我正在尝试用JavaFX做一些事情,就像Batik允许你用Swing做的那样.

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

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

有谁知道有没有办法做到这一点？我希望在JavaFX中甚至可以做什么？

Answer 1

我开始编写一个JavaFx节点到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区域的边框.此外,Region的背景填充可以具有与Region的边界不同的半径.绘制Region的背景可能需要更多的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

Answer 2

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