kawasin73 / nice-plotter Goto Github PK

タッチイベントと、mouse イベントの連携。ドラッグ

• プロットする数は、描く範囲の大きさに比例させる
  - [ ] 今のポインターの状態を表示する
• 間引く機能
• 履歴管理
• generatePoint を抑制する
• 画像出力
• デザインを整える
• ipad に対応

パフォーマンスをよくするための最適化

• 履歴のデータ構造
  • 今は、リストで履歴を保持しているが、これを双方向連結リストにすると、追加、削除が効率的にできる
• 削除・間引く時の再描画
  • 1000個程度であれば、削除の1フレームごとに再描画しても大丈夫
  • 50000個くらいになると操作にラグが確認できる。(最大250000 プロットまでできるのでもっと遅くなる)
  • 改善策としては、削除した範囲 + 点の直径 の範囲を clearRect し、削除した範囲 + 点の直径 * 2 の範囲の点を再描画する
  • 再描画の数を劇的に減らすことができパフォーマンス改善に繋がる
• 全プロットのデータ構造
  • 削除、間引く時に、指定範囲内の全プロットを検索している。
  • ２重配列になっているが、それをx方向と、y方向それぞれで並び替えると指定範囲を2分探索して範囲指定すると、計算量を減らせる。

これらの最適化は全てプロット数が増えた時に行うものであり、今回は高々1000個程度のプロットであるので、最適化は行わない。

縦のいい感じのスライダーが欲しい

データ構造と、操作のロジックをまとめる

https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial