将KineticJS绘图导出到SVG？

Question

是否可以将Kinetic JS对象导出到SVG？

或者解决方法是将Kintetic JS的画布转换为SVG。

编辑：

最好的方法是使用fabricJS，因为它在使用fabric对象时支持canvas到SVG渲染。

我接受了Phrogz的答案，因为它还将转换画布转换为svg，而不使用其他库来绘制画布。

编辑2：好的，我搞砸了，Phrogz的库是canvas元素的包装，所以你用它的方法在画布上绘图（我认为它只是'在画布上'监听'并创建SVG路径）。所以最好的解决方案是fabricJS。

Answer 1

我创建了an alpha version of a library，它允许您扩展HTML5 Canvas上下文，以便跟踪所有矢量绘图命令，并将它们作为数组SVG元素存储在上下文的ctx.svgObjects属性中。 / p>

您可以在此处查看正在运行的库：http://phrogz.net/svg/HTML5CanvasRecordsSVG.html
演示开启录制，为HTML5 Canvas绘制一些形状，然后将“录制的”SVG对象附加到隔壁的SVG容器中。

一般来说，图书馆：

1. 通过SVGMatrix对象跟踪当前的上下文转换。 （这是因为HTML5 Context api允许你将当前变换设置为矩阵，但不会让你获得当前矩阵。）它通过拦截像这样的调用来做到这一点。 translate()和rotate()并相应更新矩阵。
2. 拦截beginPath()并创建一个新的SVG Path元素，然后拦截其他命令，如moveTo()和lineTo()，以便将等效路径命令添加到SVG路径。
   • 注意：在撰写本文时，并非所有路径命令都在库中受支持或测试。
3. 拦截fill()和stroke()，将当前SVG <path>的副本添加到svgObjects数组，设置当前转换矩阵，填充和描边样式。
   • 注意：在撰写本文时，并非支持所有笔触样式（lineCap，lineJoin，miterLimit）。
   • 注意：调用fill()后跟stroke()会创建两个单独的SVG元素;没有优化来区分此特定情况与笔画/填充，或更改调用之间的转换或路径。
4. 拦截fillRect()和strokeRect()以创建SVG <rect>元素。

可以在这个库上做更多的工作来充实所有命令（不仅仅是路径命令，还有fillText()之类的东西）。但这并不是我个人所需要的，所以我不会花费数小时的时间来完成终点线。

Answer 2

最佳解决方案是使用Fabric.js！

Answer 3

基本上你可以将画布转换为base64 png，然后将它放在svg

上

也许这可以帮到你

http://svgkit.sourceforge.net/tests/canvas_tests.html