2012-03-08 22 views
1

複数のオブジェクトを持つキャンバス要素をfabricjsを使ってjavascriptコードでhtmlにエクスポートする方法はありますか?私はtoSSONまたはtoObjectをエクスポートできますが、これはisnt HTMLです。Fabric.jsでキャンバスをHTMLに書き出す方法は?

http://canvimation.github.com/には、キャンバスの描画をネイティブhtmlコードにエクスポートする関数(ファイル>エクスポートキャンバス、html)があります。fabricjsで可能ですか?

+1

「キャンバスをhtmlにエクスポートする」という意味は理解できません:はhtmlエンティティです... – msanford

+1

http://canvimation.github.com/にアクセスして試してみてくださいcanvimationをクリックし、ファイル> "canvasをhtmlにエクスポート"をクリックすると、canvimationライブラリなしのネイティブhtmlコードで図面を表示する新しいウィンドウが開きます。 – vkefallinos

+0

私は見る!私は最近、キャンバスをエクスポートしていくつかのトリックをやってきました。エクスポートされた「htmlエクスポート」で何をしたいのですか?保存して別のWebページなどに挿入しますか? 編集:上記の例では、HTMLとしてエクスポートする機能はすべて、「」オブジェクトを取得し、インターフェイスの装飾なしに新しいウィンドウに貼り付けることができます。イメージを操作したり、ローカルで表示する場合は、SVGとしてエクスポートできます。 – msanford

答えて

1

ファブリックのみオブジェクト表現JSON(そのオブジェクト表現の基本的シリアライゼーション)(独自の)へのエクスポートをサポートし、SVG

ファブリックで何かを作成し、それをキャンバスをサポートしていない環境で使用するためにエクスポートすることを目標にしている場合は、その環境でSVGがサポートされている限りSVGを使用できます。

また、「ネイティブHTMLコード」はないことも理解しておく必要があります。 HTMLのさまざまなバージョン - HTML4、HTML5などがあります。キャンバスはpart of current HTML standard (HTML5)とみなされます。

キャンバスを使わずにファブリックレンダリングを再作成し、SVGなしでを使用したい場合は、ファブリックが役立つものはまったくありません。複雑なSVGシェイプ、イメージ(スケーリング/回転などのさまざまな変換の下で)、およびその他のオブジェクトのキャンバスレスレンダリングを提供しようとすると、不必要に複雑になります。

+0

私は新しいポリゴンを作成し、それを変数に置くとしましょう。 var arrow = fabric.Polygon(ポイント、{fill: "red"、left:1、top:1})。次に、fill.colorを変更するためにarrow.set(fill: "green")を使用できます。私はvar js = JSON.stringify(キャンバス)を実行します。 \t \t canvas.clear(); \t \t canvas.loadFromJSON(js);キャンバスをクリアしてJSON文字列をロードした後、arrow.set(fill: "green")で色を変更することはできません。 – vkefallinos

+0

json文字列のオブジェクトに接続されている変数を保存する方法はありますか?オブジェクトのjson represantation内に "id"を渡して、特定のオブジェクトをアドレス指定するjsonを読み込んだ後に呼び出す方法キャンバスをリロードしましたか? – vkefallinos

+1

はい、JSONからキャンバスを再読み込みした後、 'arrow'はキャンバス上のオブジェクトを参照しません。その時点で、ファブリックは新しいオブジェクトセットを作成しました。それがキャンバス上の唯一のアイテムであれば、その "インデックス"を知っているなら、あなたは 'canvas.item(0)'(または 'canvas.item(index)')でそれを取得できます。それ以外の場合は、 'toJSON'出力を拡張する必要があると思います([how see](https://github.com/kangax/fabricを参照)。js/wiki/Adding-additional-object-properties-to-serialized-JSON))を使用して、一意のIDを返します。 – kangax

関連する問題