14

JavaScript で Web サイト上の手描きを (タブレット、タッチスクリーン、または iPad のようなデバイスから) キャプチャし、サーバー側に保存するための高度なソリューションはありますか?

基本的に、これは単純なマウス描画キャンバスであり、その解像度 (つまり、1 秒あたりのマウスの動きの数) が非常に高くなければならないという特殊性があります。そうしないと、ペンを動かすと、描画内の丸い線が「多角形」になります /マウスの速さ:

ここに画像の説明を入力

(そうでない場合、@Gregory によって提案された inputDraw ソリューションは 100% 完璧です。)

また、ペンストロークのアンチエイリアスなど、高レベルのグラフィック品質も必要です。ここには特別なものはありませんが、MS ペイント スタイルの 1x1 ピクセル ストロークではうまくいきません。

タブレット PC が少なくとももう少し一般的になりつつあることを考えると、これは一般的に非常に興味深いことだと思います。（彼らが当然のことだと思う注目を集めているわけではありません）。

どんな提案でも大歓迎です。私はオープン ソース ソリューションを好みますが、ActiveX コントロールや Java アプレットなどのプロプライエタリ ソリューションにもオープンです。

FF4、Chrome のサポートは必須です。Opera、IE8/9 のサポートが望まれます。

周りのほとんどの「キャンバス」ライブラリ、および私のものに似た他の質問へのほとんどの回答は、プログラムによるキャンバスへの描画を参照していることに注意してください。これは私が探しているものではありません。特定の領域に描画しているユーザーの実際のペンまたはマウスの動きを記録するものを探しています。

この質問が出されてから何かが変わったかどうか、好奇心から報奨金を開始します。

4

4 に答える 4

12

「onmousemove」イベントが提供するよりも高い解像度が得られるとは思えませんが、目的のためにカスタムビルドされた組み込みシステムで効率的なアセンブラープログラムを作成する必要はありません。OS 内で実行し、OS のルールに従ってプレイします。つまり、OS が提供するタイムスライスの頻度によって制限されます。(通常は 1 秒あたり約 100 で、負荷によって変動します) 「ポリゴン」の問題を克服できるタブレットを使用したことがなく、いくつかのハイエンド タブレットを使用しました。Photoshop は、3 次補間の問題を解決します。

つまり、多くの移動イベントをキャプチャして内部バッファにキューイングし、データを OS にディスパッチするときに一度に座標のパケット全体を送信する非常に特殊なタブレットを使用しない限りです。私はタブレット API を見てきましたが、一度に 1 つの座標セットしか提供しないため、これが発生する場合は、カスタム ハードウェア、カスタム ドライバー、および複数のパケットを処理できるカスタム API が必要になります。座標。

または、いまいましいキャンバス タグ、onmousemoveイベント、event.pageX|pageYキュービック補間、キャンバスの「toDataURI」APIを使用して、結果を php スクリプトに投稿し、他のすべての派手なことをしたとだけ言うこともできます。 .

私のテストでは、onmousemove は、ブラウザーのイベント ループの速度によってのみ制限される、動きのピクセルごとに 1 つのイベントを提供します。高速な動きでまばらなデータ ポイント (ポリゴン) を取得できます。これは、莫大な研究助成金とハードウェア デザイナーなしで得られるものと同じくらい優れています。対処。

于 2009-12-12T04:53:48.820 に答える
7

お絵かきの世界には、このためのアプレットがいくつかあります: Shi painter、ChibipaintまたはPaintBBS。ここに、統合用の php クラスがあります。

これらのアプレットで作成された図面は、非常に高品質です。oekakicentral.comに登録すると、すべてのギャラリーが表示され、一部の図面にはどのように描かれたかを示すアニメーション リンクがあり (アプレットによって異なります)、アプレットの可能性を比較できます。それらのいくつかはオープンソースです。

編集: HTML 5 で作成されたthisも参照してください。

于 2009-12-07T16:04:35.890 に答える
4

<InputDraw/>をご覧ください。フリーハンド描画をSVGに変換するフラッシュコンポーネントです。次に、生成されたSVGをサーバーに送り返すことができます。

非営利目的での使用は無料です。彼らのサイトによると、商用利用価格は29€</a>です。ただし、オープンソースではありません。

私見それは一見の価値があります。

または、オープンソースでjQuery（デモ）を使用するsvg-editに基づいて何かを実装します。ただし、IE6+サポート用のGoogleフレームプラグインが必要な場合。

編集：手書きの署名をキャプチャし、POSTを使用してSVGとしてサーバーに送信するsvg-freehand-signatureプロジェクト（デモ）を見つけました。わかりやすく自己完結型のzipとして配布されます（SafariとFirefoxですぐに使用できます。InternetExplorerにSVGサポートを提供するsvgwebと組み合わせることができます）。

編集：私はCesar Oliveiraのcanvaslol（ページのソースを見てそれがどのように機能するかを確認する）とExplorerCanvasをうまく組み合わせてIEに何かを持たせました。また、AnnevanKesterenのPainter実験もご覧いただけます。

于 2009-12-08T11:52:48.977 に答える
0

markup.ioは、マウスアップの後に適用されるアルゴリズムでそれを行っています。

最近、同様の質問をしたところ、興味深いが満足のいく答えは得られませんでした: mousemove イベントを加速する方法はありますか?

于 2011-04-02T22:43:32.177 に答える