タブの描きかた

昨日ダンプ解析ネタを書いてしまったので、とびとびになってしまいましたが、
書き貯めていた続きを掲載しておきます。

 

--- ここから ---

ただ、そのままOpenMotifの処理を単にデバッグしても、グラフィックとしてはバッファリングされながら描画されるので、どのコードが、どの処理か分かりにくいものです。

そこで、XFlush()という、バッファリングされているデータを画面に描画する命令をTabBox.cのコードの至るところに追加した特別版のライブラリを利用しながら、どのようにタブが描かれていくのか見てみたいと思います。

まず、タブが他のウィンドウに隠された状態です。

次にタブが表に表示された瞬間、これまで隠されていた部分はまだ描画されていない状態です。

さあ、ここからタブの描画が始まります。ここからは、gdbで追いかけながら確認したDrawTab()の流れです。

まず最初にタブの枠を描きます。今回は、タブのスタイルとして、BeveledTabと呼ばれる形なので、FillBeveledTab()が呼ばれます。

-----

    case XmTABS_BEVELED:
        FillBeveledTab(tab, tab->manager.background_GC, geometry, edge);
        break;

-----

この中では、次のようにタブの6つの座標を計算しています。

-----

    case XmTAB_EDGE_BOTTOM_RIGHT:
        if( XmTabBox_orientation(tab) == XmHORIZONTAL )
        {
            pt[0].x = x;
            pt[0].y = y + height;
            pt[1].x = x;
            pt[1].y = y + side;
            pt[2].x = x + side;
            pt[2].y = y;
            pt[3].x = x + width - side;
            pt[3].y = y;
            pt[4].x = x + width;
            pt[4].y = y + side;
            pt[5].x = x + width;
            pt[5].y = y + height;
-----

そしてこれらの座標を埋めるべくXFillPolygon()でタブを描きます。

-----

    XFillPolygon(XtDisplay(tab), XiCanvas(tab), gc, pt, 6, Nonconvex,
                 CoordModeOrigin);
-----

これでタブの大枠の形が描かれます。

次にタブの周りの影を描きます。影を描くのは、DrawBeveledShadows()です。

-----
   case XmTABS_BEVELED:
        DrawBeveledShadows(tab, info, geometry, selected, edge,
                           shadow_thickness);
        break;
-----

まず最初に直線部分の影をDrawSegments()で描きます。

-----

    DrawSegments(tab, info, geometry, edge, size, shadow, selected);
-----

次に、タブの上側の両方の角を描きます。このときには、斜めの線を描くために、斜めの四角形を描いて、影に見せます。

-----

            pt[0].x = geometry->x;
            pt[0].y = geometry->y + size;
            pt[1].x = geometry->x + size;
            pt[1].y = geometry->y;
            pt[2].x = geometry->x + size;
            pt[2].y = geometry->y + shadow;
            pt[3].x = geometry->x + shadow;
            pt[3].y = geometry->y + size;
            XFillPolygon(XtDisplay(tab), XiCanvas(tab),
                         tab->manager.top_shadow_GC,
                         pt, 4, Convex, CoordModeOrigin);
-----

この画像では、左上の影が描かれています。この後、右上の角の影も描くと、タブの形は完成です。

続いてタブ内の文字を描きます。

-----

    case XmTABS_RIGHT_TO_LEFT:
        DrawRightToLeftTab(tab, info, gc, have_pixmap, pix_width, pix_height,
                           pix_depth, have_label, label_width, label_height,
                           clip, selected);
        break;
-----

そして最後に、このタブを選択していることを表すボーダーラインを描きます。
-----
    if( keyboard && Prim_HaveTraversal(XmTabBox__canvas(tab)) )
    {
        BorderHighlight(XmTabBox__canvas(tab));
    }
-----
このタブが選択されている時だけ、keyboardが真になり、BorderHighlight()により四角い線が描かれます。

通常はここまでの処理をメモリ上に描き終わったあとに、XFlush()で画面に表示します。

このように、一見複雑そうなタブの描画ですが、内部的には、タブを構成する一箇所ずつを描いていき、最終的なタブの形を仕上げているということで、コードを読んでみるとなかなか面白いですね。