JavaScriptでフリーハンド描画を実装するために使用できるHTML5キャンバス以外のソリューションは何ですか？
HTML5キャンバスを使用してみましたが、テキストと一緒にキャンバスを保存する際に問題が発生したため、うまくいきませんでした。さらに、キャンバスは画像としてのみ保存できます。ただし、テキストを開いて再度描画および編集できる形式で保存する必要があります。
質問する
5722 次
1 に答える
3
更新: 質問にさらに情報を追加した後、キャンバスを使用したくない理由がわかりました(これはまだ使用できますが、以前とは異なる方法で使用できますが、アプリケーションに別のアプローチを好む場合があります-参照)下）。人々はあなたの回答を閉じることに投票しました。これは、回答が再開されるまで新しい回答を投稿できないことを意味するため、回答を更新してみます. また、あなたの質問を再開することに投票しました。
JavaScript オプションでの描画
HTML でフリーハンドで描画するには、次の 3 つのオプションしかありません。
- キャンバス
- SVG (IE 上の VML)
- プラグイン (例: Flash、Java、Silverlight)
キャンバスを使用したくない理由を説明しませんでした。
ブラウザのサポート
ターゲットにする必要があるブラウザーが Canvas をサポートしていない場合は、次のことができます。
- SVG または VML (または Raphaël のような SVG/VML を使用するライブラリ) を使用する
- 次のようなキャンバスを実装するものを使用します（たとえば、Flashで）：
API
ネイティブ Canvas API がニーズに合わない場合は、より多くの機能またはより優れた API を提供するキャンバス ライブラリを使用できます。
開始するための簡単なリンクを次に示します。
- http://dmitrybaranovskiy.github.io/raphael/
- http://processingjs.org/
- http://kineticjs.com/ (もうメンテナンスされていません!)
- http://www.createjs.com/#!/EaselJS
- http://paperjs.org/
- http://www.bhivecanvas.com/
- http://fabricjs.com/
保持モードと即時モード
必要なのは、 (即時モードではなく)保持モードレンダリングです。
Canvas は、SVG/VML が保持モードで動作している間、即時モード レンダリングの例です。つまり、キャンバスに何かを描画すると、それは単なるピクセルであり、描画されたオブジェクトを操作したり、フラットなラスター イメージ以外のものを保存したりすることはできません。一方、SVG は (HTML のように) 描画するオブジェクトの DOM 全体を保持し、そこにあるすべてのものを簡単に操作したり、イベントを添付したり、色を変更したり、スタイルを塗りつぶしたり、描画または保存した後にオブジェクトを移動したりできます。 .
Canvas を使用して必要なことを行うことはできますが、描画されているすべてのものを追跡するのに役立つライブラリが必要です。これは、即時モード Canvas API の上に抽象化レイヤーとして保持モードを提供するライブラリです。以前に説明したライブラリはそのように機能します。上記のリンクを参照してください。ただし、ニーズにより適した別のアプローチが見つかる場合もあります。
すぐに使えるソリューション
SVG-edit (またはGitHub ) プロジェクトを見てください。特に、SVG-edit を使用するデモやその他のプロジェクトを参照してください。SVG 編集を使用することは、おそらく目標を達成するための最も簡単な方法です。
于 2013-01-23T13:00:24.340 に答える