将KinteticJS导出为SVG？

Question

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

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

编辑：

最好是使用fabricJS，因为它支持画布渲染SVG与面料对象工作时。

我接受了Phrogz的答案，因为它也可以将canvas转换为svg，而无需使用其他库来绘制画布。编辑2：好吧，我搞砸了，Phrogz的图书馆是围绕画布元素的包装，所以你用它的方法画在画布上（我认为它只是'侦听'在画布上，并创建SVG路径）。所以最好的解决方案是fabricJS。

Answer 1

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

Answer 2

basicly可以在画布转换为Base64 PNG，然后把它放在SVG

也许这可以帮助你

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

Answer 3

我创建an alpha version of a library，使您可以扩展一个HTML5画布上下文，以便跟踪所有矢量绘图命令并将它们存储为上下文的ctx.svgObjects属性中的数组SVG元素。

你可以看到这里的行动库：http://phrogz.net/svg/HTML5CanvasRecordsSVG.html
演示打开记录，绘制了几个形状HTML5的Canvas，然后追加“记录” SVG对象的SVG容器隔壁。

一般而言库：

1. 经由SVGMatrix对象跟踪当前上下文变换。 （这是因为HTML5上下文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()）。但这不是我个人需要的东西，所以我不想花费数小时的时间把它带到终点线上。