付箋・パスの投げ縄選択
from 付箋の選択・圧縮 UI設計 付箋・パスの投げ縄選択
細い線でパスを描く
- 更新頻度の高いレイヤーを分けるのが必要不可欠
離したら
- 選択されたアイテムのハイライト表示？
- とりあえずこちらが楽そうか
- 選択範囲の点線表示 done
- 選択されたアイテムのハイライト表示？
当たり判定
- ×選択パスの各点からのhitTest
- →パスの中が選ばれない
- 付箋は4隅、パスは各点から選択範囲パスに対してhitTest
- オブジェクトの数が増えると重たくなりそう
- パスとパスのブーリアン演算を使う案
- https://stackoverflow.com/questions/40706454/paper-js-lasso-select-tool
- これはシンプルだが、パフォーマンスの心配はある
- とりあえず気にしないで実装して、遅いようならまずバウンディングボックスで絞るとかかな！
- すでに内部でやってそう！
- https://github.com/lsst-epo/paper-select-tool/tree/master
- これは「与えられたArray({point: Point})の各pointでhitTestする」というだけのもの
- →まずブーリアン演算で実装してみる
- 十分な速度で動くかどうかを検証
- 100付箋のintersectはiPadでも20msecで動く
- intersectではなく完全に包含されている場合の当たり判定が、予定していたブーリアン演算でうまく動かない
- これはおそらく、intersectはPathとShapeに対して定義されているのに
- subtractはPathとPathであることを仮定した実装になっていて
- 内部でargがPathだと思って呼び出したメソッドが存在しなくて死んでいるのだな
- 対処
- 完全に内包されている場合、相手がShapeならShapeの重心に対する点でのhitTestで確実にPathに当たるはず
- 相手がPathである場合にsubtractが使えるのであれば問題ない
- パスがfillされてないといけないのでcloneしてopacity: 0でfill。
- 付箋との間の当たり判定は問題なく動くようになった
- パスとの当たり判定も動く
- ×選択パスの各点からのhitTest
- (優先度低)投げ縄選択されたもののまとめて移動
- (必要か？)選択マイナス機能