HTML5で簡単な描画ツールを作成しますか？

Question

私は、ユーザーが部屋で簡単なフロアプランを描き、ルーム名のようなメタデータを入力する可能性があるこのプロジェクトに取り組んでいます。

私はそのようにそれを参照してください。 - あなたは 「新しい部屋を追加」をクリックしてください - あなたは、画面（または多分別の単純な形状）に四角形を描画 - あなたはそれを

を名前を付け、私は」そのようなツールを作成するのに使う最も良い（そして最も単純な）言語が何であるかは新しいものが好きです。 HTML5 + jQuery？フラッシュ？そのトリックを行うことができる既存のツール/プラグインはありますか？

ありがとうございました！

Answer 1

これを行う最も簡単な方法は、おそらくキャンバスタグを使用したHTML5にあるでしょう。 jqueryを使用してマウスイベントを取得することができます。

Flashでのアクセスと経験がある場合は、おそらくユーザーがhtml5以上のフラッシュを持つ可能性が高いため、これが最善の策です。

あなたはHTML5を使用しない場合は、HERESにいくつかの素晴らしいヘルプドキュメント

https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

http://api.jquery.com/category/events/mouse-events/

Answer 2

私はjQueryとHTML5のcanvas要素を使用しますが、私は、ユーザーがストレートを使用して図形を描画していますライン。それらはラインイメージをクリックし、2つのポイントを選択し、jQueryがラインを描画します。シェイプをjQueryに描画すると、メタデータを簡単に追加でき、将来使用するためにシリアライズされたデータをパッケージ化したり、必要に応じてイメージとして保存することができます。