線上の点への注記の配置

[3] Takahashi Research Group: A Zone-Based Approach for Placing Annotation Labels on Metro Maps, 2015-08-21T05:24:52.000Z, 2024-05-16T04:40:55.982Z https://web-ext.u-aizu.ac.jp/~shigeo/research/annotate/index-j.html

[12] Takahashi Research Group: Spatially Efficient Design of Annotated Metro Maps, 2015-08-21T05:26:46.000Z, 2024-05-16T04:42:21.378Z https://u-aizu.ac.jp/~shigeo/research/geospace/index-j.html

[13] D14.pdf, 2019-01-15T06:48:59.000Z, 2024-05-16T04:50:16.967Z http://www.csis.u-tokyo.ac.jp/csisdays2013/csisdays2013-ra-pdf/D14.pdf

[14] 高橋研究室: 地下鉄路線図に注釈を付ける際のメンタルマップの保持, 2019-10-03T06:16:56.000Z, 2024-05-16T04:51:13.811Z https://u-aizu.ac.jp/~shigeo/research/mental/index-j.html

[40] 多角線上の点 p2 の近く、距離 opts.delta の位置を、 前後の点 p1 と p3 の位置を勘案しつつ決定する JavaScript の実装例。

  function get (p1, p2, p3, opts) {
    let Q;
    {
      let d = opts.offset || 1;

      let p1p;
      let p3p;
      let pr = p1;
      if (p1.x === p2.x && p1.y === p2.y && p1.x === p3.x && p1.y === p3.y) {
        p1p = p3p = p2;
      } else if (p1.x === p2.x && p1.y === p2.y) {
        p1p = p3p = {x: p1.x + p3.x - p2.x, y: p1.y + p3.y - p2.y};
        pr = p3;
      } else if (p3.x === p2.x && p3.y === p2.y) {
        p3p = p1p = {x: p3.x + p1.x - p2.x, y: p3.y + p1.y - p2.y};
      } else {
        p1p = {
          x: p2.x + (p1.x - p2.x) / Math.sqrt ((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2),
          y: p2.y + (p1.y - p2.y) / Math.sqrt ((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2)
        };
        p3p = {
          x: p2.x + (p3.x - p2.x) / Math.sqrt ((p3.x - p2.x) ** 2 + (p3.y - p2.y) ** 2),
          y: p2.y + (p3.y - p2.y) / Math.sqrt ((p3.x - p2.x) ** 2 + (p3.y - p2.y) ** 2)
        };
      }

      const mx = (p1p.x + p3p.x) / 2;
      const my = (p1p.y + p3p.y) / 2;
      //let M = {x: mx, y: my};

      let ux;
      let uy;
      if (p2.x === mx) {
        if (p1.y === p3.y) {
          ux = 0;
          uy = 1;
        } else {
          const m1 = (p3.y - p1.y) / (p3.x - p1.x);
          const mL = -1 / m1;
          ux = 1 / Math.sqrt (1 + mL * mL);
          uy = mL / Math.sqrt (1 + mL * mL);
        }
      } else {
        const dx = mx - p2.x;
        const dy = my - p2.y;
        const m = dy / dx;
        ux = 1 / Math.sqrt (1 + m * m);
        uy = m / Math.sqrt (1 + m * m);
      }

      const Q1 = {x: p2.x + d * ux, y: p2.y + d * uy};
      const Q2 = {x: p2.x - d * ux, y: p2.y - d * uy};
      const dQ1p = Math.sqrt (Math.pow (Q1.x - pr.x, 2) + Math.pow (Q1.y - pr.y, 2));
      const dQ2p = Math.sqrt (Math.pow (Q2.x - pr.x, 2) + Math.pow (Q2.y - pr.y, 2));

      Q = dQ1p > dQ2p ? Q1 : Q2;
    }

    let angle = Math.atan2 (Q.y - p2.y, Q.x - p2.x) * (180 / Math.PI);

    angle += 22.5;
    if (angle < 0) angle += 360;
    angle %= 360;
    angle /= 45;

    let v;
    if (angle < 1) {
      v = {textAlign: "left", textBaseline: "middle", anchorPoint: Q};
    } else if (angle < 2) {
      v = {textAlign: "left", textBaseline: "top", anchorPoint: Q};
    } else if (angle < 3) {
      v = {textAlign: "center", textBaseline: "top", anchorPoint: Q};
    } else if (angle < 4) {
      v = {textAlign: "right", textBaseline: "top", anchorPoint: Q};
    } else if (angle < 5) {
      v = {textAlign: "right", textBaseline: "middle", anchorPoint: Q};
    } else if (angle < 6) {
      v = {textAlign: "right", textBaseline: "bottom", anchorPoint: Q};
    } else if (angle < 7) {
      v = {textAlign: "center", textBaseline: "bottom", anchorPoint: Q};
    } else {
      v = {textAlign: "left", textBaseline: "bottom", anchorPoint: Q};
    }

    return v;
  }

この実装例では、 p2 の周囲を8分割し、右側に置くべきならその左端 (上下中央) の位置を返し、左下に置くべきならその右上端の位置を返し、 といった感じで基準となる位置を返す。

判断基準は p2 を中心に p1, p3 が成す角度であり、 角度が大きい方の中央に向かって距離 opts.delta の位置が基準点となる。

ツールチップ表示位置の決定

[23] Anchor Positioning

[29] GUI におけるツールチップの配置 (位置決定) アルゴリズムはいろいろとノウハウが溜まっていそうなものですけど、 きっちり明文化したものって意外とないですねえ。

[30] それぞれの実装がアドホックというか発見的というか、 それぞれの方法で「ちょっとだけいい感じ」にやっているのに、 その「ちょっとだけいい感じ」がうまいこと共有知になっていないので、 結果として「まあまあいいけどなんかちょっとビミョーな感じ」の実装が氾濫しているような。

[31] 呼び出し側が位置を指定できるときは、基準に対して上下左右のどこかを選べることが多い感じでしょうかね。

[32] 基準はボタン等のGUI構成要素による場合と、マウスポインターの位置による場合、 両方による場合があります。

[33] 表示のきっかけとなるボタン等からマウスカーソル位置が外れたときに消えるタイプが一般的ですが、 そうでないタイプもあります。また、ツールチップ上にマウスカーソルを移動して操作できるタイプとそうでないタイプがあり、 操作できないタイプの方が一般的ですが、操作できるタイプもままあります。 問題となるのが、消えるタイプかつ操作できるタイプのときです。 消えない領域からツールチップ内へと直接マウスカーソルを移動できなければならない、 というツールチップ表示位置の制約が生じます。

[34] ツールチップは矩形が一般的ですが、吹き出し式とすることもあります。 その場合は吹き出し表示を考慮した位置決定が必要となります。

[35] ツールチップは基本的にそれ1つだけが同時表示され (例外もあり)、 他のツールチップの表示位置との関係の制約はありません。 また、背景となる他の部品等の配置との関係も普通は問題とされません。 (これが地図の注記等より問題を簡単にしています。)

[36] ツールチップの配置は画面上の位置を考慮する必要があります。 伝統的には基準となる窓の位置の制約は受けず、窓からはみ出しても自由に配置できます。 ただし、Webページ内部の表示のように、窓が実質的に画面に相当する制約となることがあります。 また、スクロール位置との関係は気にする必要があります。

[37] ツールチップ内容のサイズが決まる前にツールチップの位置を決めなければならない場合もあり、 この性質を持つ場合問題が難しくなります。