付箋・パスの投げ縄選択

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。
    • 付箋との間の当たり判定は問題なく動くようになった
    • パスとの当たり判定も動く

• (優先度低)投げ縄選択されたもののまとめて移動
• (必要か？)選択マイナス機能

pRegroup-done-2019