如何在Fabric.js中將畫布導出爲HTML？

有出口與多個對象canvas元素使用fabricjs用JavaScript代碼的HTML的方法嗎？我知道我可以導出的toJSON或toObject但心不是HTML。如何在Fabric.js中將畫布導出爲HTML？

我發現http://canvimation.github.com/有一個函數（file> export canvas to html）將一個畫布圖畫導出爲原生html代碼。這對fabricjs來說可能嗎？

2012-03-08 vkefallinos

我不明白你的意思是'出口一個畫布到HTML'：'

去http://canvimation.github.com/並嘗試它。你畫一些東西然後單擊文件>「將畫布導出爲html」，然後打開一個新窗口，該窗口在不帶Canvimation庫的情況下顯示原始html代碼中的圖形。 – vkefallinos 2012-03-08 17:14:46

我明白了！我最近用帆布輸出了一些技巧。一旦它被導出，你想要做什麼*帶「* html導出」：保存它，插入到另一個網頁等等？編輯：我問，因爲所有導出爲HTML功能在上面的例子中是抓住'

織物僅支持出口（其自身）對象表示，JSON（即對象表示的基本上是序列化），和SVG。

如果你的目標是建立在面料的東西，然後將其導出爲環境中使用不支持的畫布，那麼也許你可以使用SVG - 只要SVG在這樣的環境支持。

你也必須明白，有作爲「本地HTML代碼」沒有這樣的事。有不同版本的HTML - HTML4，HTML5等。畫布被認爲是part of current HTML standard (HTML5)。如果你想重新面料呈現無帆布，沒有SVG）

再沒什麼好說的織物可與幫助，所以在畫布上繪製的東西肯定可以被認爲是「使用原生的HTML代碼」。嘗試提供複雜的SVG形狀，圖像（在各種轉換，如縮放/旋轉下）以及其他對象的繪製不太複雜。

來源

2012-03-09 14:32:35 kangax

假設我創建一個新的多邊形並將其放在一個變量上。 var arrow = fabric.Polygon（points，{fill：「red」，left：1，top：1}）。然後我可以使用arrow.set（fill：「green」）來改變填充顏色。問題是什麼時候我運行var js = JSON.stringify（canvas）; \t \t canvas.clear（）; \t \t canvas.loadFromJSON（js）;清除畫布並加載JSON字符串後，我無法使用arrow.set（fill：「green」）更改顏色。 – vkefallinos 2012-03-09 23:50:34

那麼，有沒有辦法可以保存與在JSON字符串對象連接的變量？我如何傳遞對象的JSON represantation內的「ID」這樣我就可以加載JSON，以解決具體的對象後回憶起來重新加載畫布？ – vkefallinos 2012-03-09 23:59:30

是的，從JSON重新加載畫布後，'arrow'不再引用畫布上的對象。那時織物創建了一組新的對象。如果它是canvas上唯一的項目 - 如果你知道它的「索引」 - 你可以通過'canvas.item（0）'（或'canvas.item（index）'）檢索它。否則，我想你需要擴展'toJSON'輸出（[見how]（https://github.com/kangax/fabric。js/wiki/Adding-additional-object-properties-to-serialized-JSON））返回某種唯一的id。 – kangax 2012-03-10 12:24:03

如何在Fabric.js中將畫布導出爲HTML？

回答

相關問題