将 KinteticJS 绘图导出到 SVG？答案

【问题标题】：Export KinteticJS drawing to SVG?将 KinteticJS 绘图导出到 SVG？
【发布时间】：2012-04-28 00:29:12
【问题描述】：

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

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

编辑：

最好使用fabricJS，因为它在处理织物对象时支持画布到 SVG 渲染。

我接受了 Phrogz 的回答，因为它还可以将画布转换为 svg，而无需使用其他库在画布上绘图。

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

【问题讨论】：

Kinect 是一个 HTML5 Canvas 库。 HTML5 Canvas 是一种位图格式（有时使用类似矢量的命令绘制）。 SVG 是一种矢量格式。最简单的答案是获取画布的输出并将其用作 SVG 文件中的图像。你真正想做什么？
Thx，但这不是一个选项，因为我需要 SVG 路径，而不是 base64 png，因为之后的文件大小。
您的画布绘图是否仅包含可以捕获的路径命令？你能改变填充画布的 JS 的来源吗？
我们正在尝试制作一个可以导出为 SVG 的绘图应用程序。你说我可以根据我的 JS 数据编写自己的 SVG 渲染器，因为我知道我在画布上绘制什么？
您可以将 HTML5 图形上下文替换为执行相同操作的包装对象，但还可以记录所有路径和笔画等等。（每次更新，或仅存储上次更新的命令。）然后您可以将记录的命令转换为 SVG 命令。当我有时间的时候，我会根据这个得出一个答案。

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

一般图书馆：

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

可以在这个库上做更多的工作来充实所有的命令（不仅仅是路径命令，还有像 fillText() 这样的东西）。但这不是我个人需要的东西，所以我不打算花几个小时把它带到终点线。

【讨论】：

您可能应该调用 cloneNode 并带有参数以确定您想要浅克隆还是深度克隆。当参数缺失时，gecko 似乎进行深度克隆，而 webkit 进行浅层克隆，Opera 抛出异常。
@ErikDahlström 啊，好点子，谢谢。我经常忘记FF在这方面的挑剔。固定。
@Phrogz 我会接受你的回答，因为这是解决问题的最佳解决方案，尽管我将使用 fabric.js
@vale4674 我以前没见过。您应该添加自己的建议 Fabric.js 的答案并接受它；这是一个更好、更强大、受支持的答案。
@Phrogz 我将编辑我的答案并建议面料。但我会保持你的答案是最好的，因为我的主要问题是 canvas -> SVG 而你的库就是这样做的。

【解决方案3】：

基本上你可以将画布转换成base64 png然后放到svg上

也许这对你有帮助

【讨论】：