Signature_pad: 描画品質を向上させる

これは私が去年の夏に行った迅速で汚い実験です。 アイデアは、移動するウィンドウ上の関数を使用してパスをスムーズにすることです。 ウィンドウはコードで設定されますが、速度に基づいて調整できます。 簡単にするために、固定のペン幅を使用しました。
http://scvsa-servizi.campusnet.unipr.it/tools/signature/signature_pad/example/

cl。

@claudiorivettiそれは本当に素晴らしいです！ 確かめます。 Google描画アプリの1つが同じソリューションを使用していたことを覚えています。 ただし、iMessageの奇妙な点は、ラグがこのライブラリよりも長くないことです...

スタイラスの代わりに指を使って描画する場合、タッチポイントはかなり広く（確かに1ピクセルより広い）、モバイルアプリやブラウザが実際にそのようなタッチイベントの正確な座標をどのように把握しているかはわかりません。場合。 おそらく、前のポイントの座標と現在の速度に基づいて、ブラウザが受信する座標を調整し、それらの間のパスを補間するだけではない可能性があります。 それが意味をなすのか、それとも実験する時間があるのか​​はわかりません。 曲線自体を改善できるかどうか、またはポイントが「理想的な」線に沿っていないかどうかを確認するには、ポイントを表示する必要があります。

@claudiorivettiそれは美しいです、どうすればそのような魔法を手に入れることができますか？ :)確かに、完全に動的に、もう少し現実的である必要があります。あるいは、太い線で十分かもしれません。

私が観察したほとんどの人は、何らかの理由で書き込みが遅く、90年代からのように見えます。 SignaturePadの入力パラメーターを微調整しても、過酷なコーナーを取り除くことはできません。

（追記：デスクトップ、iPhone、タブレットペン、または指だけのどちらでもかまいません。常に同じように見えます。キャンバスは、スケール3,3（つまり、400x400px）で1200x600ピクセルです。私は思いません。解決策が問題です）

私が驚いたのは、他のライブラリには動的な幅がまったくないが、一般的には「よりクリーン」に見えることです。 たとえば、上に投稿した画像と比較してください。

スーパーシグニチャは曲線を自動修正します

jSignature ）は少し不安定ですが、それでもピクセルっぽくはありません。

@halo後処理/自動修正は避けたいのですが、通常は結果がはるかに優れていることに同意します。 重要なのは、少なくともiMessageでは、目立った後処理なしで滑らかな線を描くことができるということです。 私が試したいことがいくつかあります。たとえば、互いに近すぎるポイントをスキップします。 最近スロットルが追加されましたが、誰かが本当にゆっくりと描く場合、それはあまり役に立ちません。

もう1つは、このライブラリをもう使用しないことです。そのため、より滑らかな線を提供する方法の例を見つけない限り（ Squareによる投稿で行ったように）、調査する時間はあまりないと思います。私自身。

@halo簡単な実験を行いました。前のポイントに近すぎる場合は、ポイントをスキップします。 描画が非常に遅い場合は、描画品質が向上するように見えますが、顕著な遅延が発生します。 ただし、iOS iMessageまたはNotesアプリで可能なこととはかなりかけ離れています：/デモはhttp://signature-pad.surge.sh/で入手でき、 signaturePad.minDistanceの値を変更して、その影響を確認できます。お絵かき。 デフォルト値は5です。これは、前のポイントが新しいポイントに5pxより近い場合、新しいポイントがスキップされることを意味します。

また、 performance.nowを使用して#_updateStroke関数（デモにはありません）にタイミングを追加しました。非同期が発生していないか、何かを台無しにしない限り、1時間未満かかるようです。ミリ秒でポイントを追加し、曲線を描きます。 これは、より凝った処理を行うための十分な時間があることを意味します。

私はこれを実際のユーザーと一緒に本番環境で試してみて、フィードバックを提供します。 Githubにブランチがありますか、それとも私が使用できるdistファイルがありますか？

私はアプローチが好きです、それを試してくれてありがとう。

編集：私はhttp://signature-pad.surge.sh/js/signature_pad.jsを使用できると思います

@halo独自のバージョン（縮小など）を作成したい場合は、 https：//github.com/szimek/signature_pad/tree/improve-drawing-qualityブランチにプッシュします。

ありがとうございます。コンパイルしたものをデモページから取り出して、本番環境にデプロイしました。 今後1〜3週間でどのように受け取られるかをお知らせします。

@ halo＆ @ szimek-この2つのリンクを見てください、それは役に立つかもしれません

• http://paperjs.org/examples/path-simplification/
• http://thejosephturner.com/simpleline/

@ fa-at-pulsitありがとう！ ただし、どちらの例も、ユーザーが描画を停止した後のパスを単純化するため、避けたいと思います。 ある時点で諦めてこのソリューションを採用するかもしれませんが、目立った遅延なしに、より良い結果が得られることを願っています。

後処理/自動修正は避けたい

好奇心から、それはなぜですか？

• []コードをシンプルかつ堅牢に保ち、バグを回避する
• []視覚的な不具合でエンドユーザーエクスペリエンスを台無しにしない
• []書き込み中に描画ストリームを公開するなどを防ぐロックイン
• []既存の処置後のソリューションは十分に成熟していません

ちなみに、先週エンドユーザーから寄せられた主観的なフィードバックから、（定期的に定期的に署名することで）「明らかに改善された」として、描画品質がすぐに理解されたことがわかります。 骨にもう少し肉を入れることができるかどうかを確認しますが、比較のためにここで実際の署名を公開することはできません。

私が言えるのは、ほとんどの人が途方もなく遅くて小さいことを書いているということです。 ;）また、デバイス（Surface Pro）が主な原因であると思われます。 ある時点で、これらの派手な新しいペンの1つでiPadを使用すると、それについてより多くの洞察が得られるかもしれません。

@szimekこの他の例は、その場でパスを単純化しました（私はそう思います）
このビデオを見てくださいhttps://www.youtube.com/watch?v=H79iUsai6uc
ソース-> https://github.com/eur00t/Effective-Curve-Fitting
キャンバスのサイズを変更すると、網膜への影響が大幅に改善されます。
<canvas width="1000" height="200" style="width: 500px; height: 100px;"/>

@ fa-at-pulsitありがとう！ 私はiMessageアプリでもう少し遊んだし、（おそらく私の超低速のiPhone 5のおかげで）それがその場で後処理も行うことに気づいたが、それは非常に微妙でほとんど目立たない。

最初にいくつかのバグ修正を含む新しいバージョンをリリースする必要がありますが、次に、互いに近すぎるオプションのスキップポイントを含む新しいバージョンをリリースしてから、後処理でその場でこれを調べます-本当に見えます有望な。

ですから、1.5ヶ月の生産で、このPRによって品質が大幅に向上したと自信を持って言えます。 数十人が何度も何度も署名しており、以前の署名と比べるとはるかに見栄えがします。

最初にいくつかのバグ修正を含む新しいバージョンをリリースする必要がありますが、次に、互いに近すぎるオプションのスキップポイントを含む新しいバージョンをリリースしようとします

やあ！ 下位互換性が必要ですか？ それとも、このコミットだけですか？

編集：私の悪い、それはすでにこのコミットを介してマージされていますか？ 本当にありがとうございます！！

描画速度を向上させる方法はありますか？