付箋をたくさん出すと重い
100枚付箋を出すと、手書きが困難になるレベルで重い
付箋が動き回ってるわけでもないのに手書き時に重たいのはおかしい
- 全体を再描画しているのか？？
付箋が10枚程度しか画面に出ていない状態(オブジェクト自体は10000個ある)でペン入力を試して、FPSが1近くまで落ちている
- ペン入力の最中に画面外まで含めて全部再描画してそう
PCだと問題を再現するのに10000付箋とかにしているので「そんなに出すことないだろ」って話なんだがiPadだと100枚で不快な遅延を感じるレベルなのでこれではダメだ
手書きは速度にセンシティブたから、まあキャンバスを分けることになるだろう
付箋が100枚表示されてる状態でのズームや付箋の移動は、頻出ユースケース
- そこがストレスフルでは根本的に困る
- 付箋を100枚表示してストレスなくズームできること
- 付箋を100枚表示してストレスなく付箋の移動ができること
- 手書きがスムーズにできること
マシンの性能が本質的に不足しているのではないと思う
- paper.jsを素直に使うと、paper.jsが汎用的に作ってるせいで枝刈りが出来ない
- ユースケースと密結合に作れば期待してる程度の性能は出ると思う
- 今回の想定ユースケースでは、ユーザが編集したものは常に最前面に来るので、編集対象のキャンバスと保持のためのキャンバスを重ねるのはまあOKだろう
「画面上に箱が100個並んでる絵」程度のものが滑らかにスクロールやズームできないのはやはりおかしい
- touchmove的なイベントで重たい処理が走らないようにする必要がある
- 一方paper.jsはおそらく:
- ズームを変更すると画面内にあるかどうかと無関係にオブジェクトツリーを全部辿って再描画
- オブジェクトを追加すると同様に全部再描画
- 理由:
- 付箋が画面外にあっても重たくなる
- 他のオブジェクトが変更されていない状態での手書きがラグる
- 手書き中のパスの追加で重たい処理が走っているから