最終更新: a few seconds ago Remove Netlify-related code from main (grafted, HEAD)

2020 年 9 月 CIRCUS アノテーション関係の改良

概要

以下の通り 2 種類のアノテーションの追加/改良と、自動塗りツールの新規作成を行う。

CIRCUS RS と CIRCUS DB はあくまで別プロジェクトなので PR の作り方には注意する。基本的には CIRCUS RS で基本機能を実装する PR とデモを先に作ってマージし、その後に CIRCUS DB にそれを組み込む、というステップをとりたい。

1. Point Annotation の改良と CIRCUS DB への追加

CIRCUS RS に Point というアノテーションタイプがある (src/browser/annotation/Point.ts)。現状ではこれはクリックした位置を表示するために「点」をただ表示する、という目的で使われているが、これを改良するとともに、6 つ目の CIRCUS DB のアノテーションタイプとして追加する。

CIRCUS RS 側

  • Point をドラッグによる位置変更に対応させる。他のアノテーションタイプと同様、現在のツールと関係なくマウスドラッグできるようにする。
  • z, zThreshold, color, dimmedColor あたりは PlaneFigure と挙動が共通になる。意味的には Point も平面上にあるという意味では PlaneFigure の一種とも言えるので、ドラッグ対応と合わせてクラス階層の再構築、ないしインターフェースの導入をしたい。
    • 案 1: PlaneFigure のまま Point をそちらに統合して type で区別させる
    • 案 2: 現状の PlaneFigure と Point のスーパークラスとなる何かを定義する
    • クラス名は変わっても良いが、case-detail, job-detail とデモでクラス名だけは変更を。

CIRCUS DB 側

基本的に現状のコードに Point アノテーションタイプを素直に追加する。

2. ものさしアノテーションの追加

2 点間の直線距離を測るためのいわゆる「ものさしアノテーション (Ruler)」と、それを追加するための「ものさしツール (RulerTool)」を新規開発する。

CIRCUS RS 側

Ruler (extends Annotation) について：

  • これは PlaneFigure と違い、オブリーク画面上でも動作する必要があることに注意。

  • もしまだ存在しなかった場合、voxelSize を考慮したうえで 3 次元空間上の 2 点間の距離を計算する関数を Ruler の外に書いて、それをテストする（これは Ruler 自体と関係なく有用、かつテストが重要なので外に書く）

  • Ruler は view state が MprViewState であり、かつ始点と終点の 2 つがいずれも Section 上にある（か、Section に十分近い）場合にのみ表示される。

  • 計測値は始点の近傍、かつ Section の外側にならない位置に表示する。

  • 「始点」「終点」「ラベル位置」の 3 つをドラッグ可能にする。始点や終点が Section から微妙にずれている場合、ドラッグ時に Section 上にぴったり一致するように修正する。

  • 必要なプロパティ

    • color: 線とハンドルの色（アルファ含む）。
    • width: 線の幅。
    • handleSize: 始点と終点のハンドルの直径。
    • zThreshold: 始点または終点が Section から何 mm 離れていても描画するか。
    • labelPosition: ラベルの位置。3 次元座標で保持するわけにはいかないので、「キャンバス座標（2 次元）における始点との相対位置」で指定する。
    • labelStyle: ラベルのフォント等に関する情報。同じデータ構造を別途作成予定のテキストアノテーションツールでも使う可能性が高いので、FontStyle みたいなインターフェースを作って使う。
      • fontFamily: フォント
      • fontSize: フォントサイズ
      • color: ラベルの色（アルファ含む）

RulerTool (extends ToolBase) について

  • ドラッグを開始した場合に上記の Ruler アノテーションを新規追加するためのツール。現行の CuboidTool などと同様に作成する。

CIRCUS DB 側

上記で開発したものを第 7 のラベルタイプとして追加する。

  • "Add new Ruler" を選んだ際に、axial, sagital, coronal, oblique のいずれの断面上にアノテーションを配置するかを選択させるダイアログを表示する（@smikitky/rb-components/lib/modal の ChoiceDialog を使う）。
  • RulerTool は CIRCUS DB では使わない。他のラベルタイプと操作感を統一するため。

3. 3 次元自動塗りツールの追加

CIRCUS RS 側

Photoshop には類似の色のピクセルを自動選択してくれる「自動選択（マジックワンド）ツール」というものがあるが、これと類似のものを作成する。

既存のバケツツールとも多少似ているが、自動塗りツールは 3 次元ベースであることと、VoxelCloud の値を見るのではなく背後にある DicomImage の画素値を見て塗る、ということが異なる。

  • Tool のオプション（BrushTool/EraserTool でも使っているもの）として以下を登録できるようにする。
    • mode: '2d' もしくは '3d' で指定。Axial スライスのみで塗るか、3 次元で塗るか。
    • threshold: どの程度の画素値の差を似た色として許容して塗るか。クリック位置を中心として、クリック位置の画素 ± threshold の画素を塗る。
    • maxDistance: クリック地点からのどの範囲までを塗るか（直線距離、mm ベース）。threshold の値を大きくしすぎた場合はこの半径の球内が全部塗られるイメージ。

CIRCUS DB 側

現行のバケツツールアイコンの隣あたりに 3 次元自動塗りツールを新規で追加する（これは Ruler と違い、ツールとして追加する）。上記の threshold と maxDistance の設定フィールドは を使って、このツールがアクティブな場合にのみ表示する。