將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()）。但這不是我個人需要的東西，所以我不想花費數小時的時間把它帶到終點線上。