2012-02-14 12 views
1

HTML5キャンバスのグラフィック要素をディスクに保存し、そのデータを別の場所で操作してから操作したデータabckを読み込み、キャンバスを元のとおりに再描画したいと考えています。キャンバスがイメージとして保存されているソリューションしか見つかりませんでした。キャンバスに含まれる要素をクエリー/トラバースすることは可能ですか?私はWPF/Silverlightのようなものがあると思います。HTML5キャンバスをデータとして保存する

-pom-

答えて

1

いいえ、あなたはあなたのようなたとえば、オブジェクトに描画されているものを保存する必要があります。

{"shape": "circle", "x": 45, "y": 112, "radius": 23, "color": "ff3480"} 

あなたはJSONにオブジェクトをシリアル化し、ディスク上またはデータベースに保存することができます。また、JSONをデシリアライズしてオブジェクトを再度描画する機能が必要です。

0

組み込みの方法はありません。キャンバスは直接描画面であり、それ以上はありません。四角形を描画するように指示すると、ピクセルをスローして、今行ったことのすべてを忘れてしまいます。あなたが何かを追跡したい場合は、あなた自身でそれをすべてやる必要があります。そうでなければ、同じことをした図書館を手に入れましょう。

SVGは保持された描画面です。描画されるすべてのアイテムは、実際には現在の状態を表すデータを持つDOMオブジェクトです。あなたがやっていることに応じて、SVGを使うとここで頭痛の種をたくさん節約できます。

Raphaelは、既に完了していることを確認したい場合に適したSVGライブラリです。いくつかのサンプルをチェックしてください:

http://raphaeljs.com/

関連する問題