如何将JavaFX节点导出到SVG图像？ [英] How can I export a JavaFX node to an SVG image?

问题描述

换句话说，我正在尝试用JavaFX做什么，比如

图表示例（不起作用）：

这里有相应的svg文件：

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

进一步注释

除了上面图表示例所示的定位问题外，还需要考虑其他一些问题：

JavaFx提供比SVG sta更多的css功能ndard元素。例如，（矩形）JavaFx区域可以为四条边界线中的每一条具有单独的线条样式。这样的区域不能简单地转换为SVG矩形。相反，需要单独绘制Region的四条边界线。此外，这种边界线的每一端可以具有两个单独的边缘半径：垂直半径和水平半径。为了将四个边界线转换为相应的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

In other words, I'm trying to do something with JavaFX like what Batik allows you to do with Swing.

I want to be able to capture the appearance of an arbitrary node in my JavaFX UI, much like Node.snapshot() does, except that I need my image in a vector format like SVG, not a raster image. (And inserting a raster snapshot of my node into an SVG image is not good enough; it needs to be a proper, scalable vector image.)

This is a long-term project, so I'm even willing to go as far as implementing my own GraphicsContext, or whatever the equivalent is in JavaFX's retained mode API.

Does anyone know if there is a way to do this? Is what I'm hoping to do even possible in JavaFX?

解决方案

I started to write a JavaFx Node to SVG converter which "extends" the ShapeConverter from Gerrit Grunwald which only converts Shape geometries:

https://github.com/stefaneidelloth/JavaFxNodeToSvg

... and stopped it after a certain amount of frustration.

Please feel free to improve it, add features and fix bugs.

The converter works for simple Node examples but fails for advanced examples like a Chart. My failed converter might serve you as a starting point. The current state is illustrated by the following figures. The left side shows the original JavaFx node and the right side shows the resulting svg output.

Simple node example (works):

Chart example (does not work):

The corresponging svg files are available here:

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

Some further notes

In addition to the positioning problems that are illustrated by the Chart example above, some further issues have to be considered:

JavaFx provides more css functionality than the SVG standard elements. For example a (rectangular) JavaFx Region can have individual line styles for each of the four border lines. Such a Region can not simply be converted to a SVG rect. Instead, the four border lines of the Region need to be drawn individually. Furthermore, each end of such a border line can have two individual edge radii: a vertical radius and a horizontal radius. In order to convert the "four" border lines to corresponding SVG lines ... it might be necessary to further split the border line: draw two rounded parts and a straight part for each of the four border lines. Therefore, in some cases there might be 12 SVG path elements to draw the border of a single JavaFx Region. In addition, the background fill of the Region can have different radii than the border of the Region. Drawing the background of the Region might requires some more SVG elements. Therefore, even the conversion of a "rectangular Region" can get quite complex.

Please also note that JavaFx nodes might be animated. For example the opacity of a line is 0 at the beginning and fades to another value after a few milliseconds.

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

Therefore it only makes sense to convert Nodes where animations are disabled or to wait until the Nodes are in a stable state.

I would be very happy if the conversion of JavaFx Charts works one day, so that I can use JavaFx plotting with SVG export in one of my projects.

I decided to stop the development of the converter for the time being and to investigate the plotting and SVG export with JavaScript libraries (d3) instead. If that strategy turns out to be even worse, I might come back to the JavaFxNodeToSvgConverter.

Edit The plotting with d3.js works very well and I decided not to use JavaFx for the purpose of plotting/svg creation. https://github.com/stefaneidelloth/javafx-d3

这篇关于如何将JavaFX节点导出到SVG图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！