2

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

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

编辑：

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

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

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

4

3 回答 3

4

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

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

一般来说图书馆：

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

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

于 2012-04-16T22:45:35.063 回答
4

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

于 2012-04-17T17:24:18.513 回答
0

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

也许这可以帮助你

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

于 2012-04-16T16:58:27.353 回答