前のページ次のページ上に戻るホーム BREW C++ ライブラリ & GUI フレームワーク & XML ミドルウェア : SophiaFramework 4.1

12.2. 図形

図 12.3. 図形の種類

図形の種類

12.2.1. 線

表 12.1. 線分を表すクラス

クラス名 図形の種類 解説
SFXLine 直線を表すクラスです。

例 12.3. 直線の定義

// 始点 ( 10, 40 )、終点 ( 30, 20 ) の直線
SFXLine line(10, 40, 30, 20);

例 12.4. 直線の描画

// SFXGraphics インスタンスの取得
SFXGraphicsPtr graphics = SFXGraphics::GetInstance();
graphics->DrawLine(line);         // 線を描画する

例 12.5. 直線の値の取得

SInt32 startX = line.GetStartX(); // startX = 10
SInt32 startY = line.GetStartY(); // startY = 40
SInt32 endX = line.GetEndX();     // endX = 30
SInt32 endY = line.GetEndY();     // endY = 20

例 12.6. 直線の設定

// 始点を ( 10, 20 ) に設定する
line.SetStart(10, 20);

// X 座標と Y 座標に分けて始点を設定する
line.SetStartX(10);
line.SetStartY(20);

// 終点を ( 80, 20 ) に設定する
line.SetEnd(80, 20);

//  X 座標と Y 座標に分けて終点を設定する
line.SetEndX(80);
line.SetEndY(20);

例 12.7. 直線の演算

// 始点を ( 10, 20 )、終点を ( 80, 20 ) に設定する
line.Set(10, 20, 80, 20);

graphics->DrawLine(line);     // 線を描画する

// 線を右に 0 ピクセル、下に 10 ピクセル移動する
line.Offset(0, 10);

graphics->DrawLine(line);     // 線を描画する

// 線を右に 10 ピクセル、下に 2 ピクセル移動する
line.Offset(10, 2);

// 終点を左に 20 ピクセル移動する ( 左への移動は引き算でも記述できる )
line.SubEndX(20);

graphics->DrawLine(line);     // 線を描画する

SIntN i;
for (i = 0; i < 5; ++i) {
    // 線を右に 0 ピクセル、下に 10 ピクセル移動する
    line.Offset(0, 10);
    graphics->DrawLine(line); // 線を描画する
}

12.2.2. 長方形

表 12.2. 長方形を表すクラス

クラス名 図形の種類 解説
SFXRectangle 長方形 長方形を表すクラスです。

例 12.8. 長方形の定義

// 左上の点 ( 10, 40 )、幅 60、高さ 35 の長方形
SFXRectangle rectangle(10, 40, 60, 35);

例 12.9. 長方形の枠線の描画

SFXGraphicsPtr graphics = SFXGraphics::GetInstance();
graphics->DrawRectangle(rectangle);

例 12.10. 長方形を塗りつぶす描画

graphics->FillRectangle(rectangle, SFXRGBColor(0x00, 0x00, 0x00, 0x00));

参照 :

例 12.11. 長方形の値の取得

SInt32 left = rectangle.GetLeft();     // left   = 10
SInt32 right = rectangle.GetRight();   // right  = 70
SInt32 top = rectangle.GetTop();       // top    = 40
SInt32 bottom = rectangle.GetBottom(); // bottom = 75
SInt32 width = rectangle.GetWidth();   // width  = 60
SInt32 height = rectangle.GetHeight(); // height = 35

例 12.12. 辺の取得

SFXLine leftLine = rectangle.GetEdgeLeft();
SFXLine rightLine = rectangle.GetEdgeRight();
SFXLine topLine = rectangle.GetEdgeTop();
SFXLine bottomLine = rectangle.GetEdgeBottom();

例 12.13. 長方形の底辺と右辺だけの描画

graphics->DrawLine(rectangle.GetEdgeBottom());
graphics->DrawLine(rectangle.GetEdgeRight());

例 12.14. 長方形の設定

rectangle.Set(15, 20, 40, 35);
rectangle.SetLeft(30);
rectangle.SetRight(25);
rectangle.SetTop(45);
rectangle.SetBottom(60);
rectangle.SetWidth(25);
rectangle.SetHeight(35);

例 12.15. 長方形の演算

// 画面全体の長方形を取得
SFXRectangle rectangle = SFXGraphics::GetDeviceRectangle();

// 長方形を横 5 ピクセル、縦 10 ピクセルだけ縮める
rectangle.Deflate(5, 10);

graphics->DrawRectangle(rectangle);

SInt32 delta = 30;

// 長方形の高さだけを 30 高くする
rectangle.AddTop(delta);

graphics->FillRectangle(rectangle, SFXRGBColor(0x00, 0x00, 0x00, 0x00));

12.2.3. グリッドとピクセル

表 12.3. 点 ・ 画素を表すクラス

クラス名 図形の種類 解説
SFXGrid 点 ( グリッド ) グリッド座標を取り扱うクラスです。
SFXPixel 画素 ( ピクセル ) ピクセル座標を取り扱うクラスです。

囲碁や将棋に例えると、「描画する平面」は盤面、「グリッド」は囲碁の碁石を置く場所、「ピクセル」は将棋の駒を置く場所です。

図 12.4. グリッドとピクセル

グリッドとピクセル

12.2.3.1. グリッド

例 12.16. グリッドの定義

// (10, 20) にあるグリッド 
SFXGrid grid(10, 20);

例 12.17. グリッド座標の取得

SInt32 x = grid.GetX();     // x = 10
SInt32 y = grid.GetY();     // y = 20

例 12.18. グリッド座標の設定

grid.Set(15, 25);
grid.SetX(15);
grid.SetY(25);

例 12.19. グリッドの演算

// 点を右に 3 グリッド移動する
grid.AddX(3);

// 点を左に 3 グリッド、下に 3 グリッド移動する
grid.Add(-3, 3);

例 12.20. グリッドの描画

SFXGraphicsPtr graphics = SFXGraphics::GetInstance();

// テキストを描画する ( grid は描画位置 )
// DrawText 関数は SFXPixel インスタンスを引数にしない
graphics->DrawText("drawing", grid); 

// 画像を描画する : 左上が (10, 20) となる 
// image : SFBImageSmp 型
image->Draw(SFXGrid(10, 20));

12.2.3.2. ピクセル

例 12.21. ピクセルの定義

// (10, 20) にあるピクセル 
SFXPixel pixel(10, 20);

例 12.22. ピクセルの描画

SFXGraphicsPtr graphics = SFXGraphics::GetInstance();
// DrawPixel 関数は SFXGrid インスタンスを引数にしない
graphics->DrawPixel(pixel);

ピクセル座標の取得

SInt32 x = pixel.GetX();     // x = 10
SInt32 y = pixel.GetY();     // y = 20

例 12.23. ピクセルの設定

pixel.Set(15, 25);
pixel.SetX(15);
pixel.SetY(25);

例 12.24. ピクセルの演算

SFXPixel pixel(10, 20);
SFXGraphicsPtr graphics = SFXGraphics::GetInstance();

SInt32 i;
for (i = 0; i < 50; ++i) {
    // 点を描画する
    graphics->DrawPixel(pixel, SFXRGBColor(0x00, 0x00, 0x00, 0x00));
    
    // 点を右に 3 ピクセル移動する
    pixel.AddX(3);
}

for (i = 0; i < 50; ++i) {
    // 点を描画する
    graphics->DrawPixel(pixel, SFXRGBColor(0x00, 0x00, 0x00, 0x00));
    
    // 点を左に 3 ピクセル、下に 3 ピクセル移動する
    pixel.Offset(-3, 3);
}

図 12.5. 実行結果

実行結果

12.2.4. サイズとマージン

表 12.4.

クラス名 図形の種類 解説
SFXSize サイズ 幅 ( width ) と高さ ( height ) を表すクラスです。
SFXMargin 余白 長方形の上下左右の余白を表すクラスです。

例 12.25. サイズ

// レスポンダ
SFRResponderPtr responder;

// 幅が 10 ピクセル、高さが 20 ピクセルのサイズを表す
SFXSize size(10, 20);

// 右に 10 ピクセル、下に 20 ピクセル、レスポンダの仮想領域をスクロールする
responder->Scroll(size);

例 12.26. 長方形 (SFXRectangle) クラスの幅と高さ

// 長方形
SFXRectangle rectangle(10, 20, 30, 40);

// 幅が 50 ピクセル、高さが 60 ピクセルのサイズを表す
SFXSize size(50, 60);

// 長方形の幅を 50 ピクセル、高さを 60 ピクセルに設定する
rectangle.SetSize(size);

// 長方形の幅を 15 ピクセル、高さを 25  ピクセル大きくする
rectangle.AddSize(SFXSize(15, 25));

例 12.27. マージン

SFRTitleWindowPtr window1;
SFXMargin margin;

// window1 のフレーム領域をマージンとして取得する
margin = window1->GetFrameMargin();

SInt32 top = margin.GetTop();       // フレームの上側の大きさ
SInt32 bottom = margin.GetBottom(); // フレームの下側の大きさ
SInt32 left = margin.GetLeft();     // フレームの左側の大きさ
SInt32 right = margin.GetRight();   // フレームの右側の大きさ

関連情報 : 描画領域

12.2.5. 三角形・円・扇形など

表 12.5. 三角形・円・扇形などを表すクラス

クラス名 図形の種類 解説
SFXTriangle 三角形 3 点 (x1, y1), (x2, y2), (x3, y3) を持つ、三角形を表すクラスです。
SFXCircle 中心 (x, y)、半径を持つ、円を表すクラスです。
SFXPie 扇形 中心 (x, y)、半径、開始角度、範囲角度を持つ、扇形を表すクラスです。
SFXArc 中心 (x, y)、半径、開始角度、範囲角度を持つ、弧を表すクラスです。
SFXEllipse 楕円 中心 (x, y)、左右半径、上下半径の値を持つ、楕円を表すクラスです。

図 12.6. 三角形・円・扇形など

三角形・円・扇形など

例 12.28. 三角形・円・扇形などの描画

// 三角形
// 左から x1, y1, x2, y2, x3, y3
SFXTriangle triangle(10, 40, 105, 25, 80, 95);
// 三角形の描画
graphics->DrawTriangle(triangle);

// 円
// 左から中心の x 座標、中心の y 座標、半径
SFXCircle circle(170, 60, 40);
// 円の描画
graphics->DrawCircle(circle);

// 扇形
// 左から中心の x 座標、中心の y 座標、半径、開始角度、範囲角度
SFXPie pie(80, 160, 60, 120, 60);
// 扇形の描画
graphics->DrawPie(pie);

// 弧
// 左から中心の x 座標、中心の y 座標、半径、開始角度、範囲角度
SFXArc arc(190, 160, 60, 120, 60);
// 弧の描画
graphics->DrawArc(arc);

// 楕円
// 左から中心の x 座標、中心の y 座標、左右半径、上下半径
SFXEllipse ellipse(110, 200, 100, 20);
// 楕円の描画
graphics->DrawEllipse(ellipse);

12.2.6. 多角形と折れ線

SFXPolygonSFXPolyline クラスでは、頂点 ( SFXPixel ) の座標の配列を外部で確保し、インスタンスに設定します。

表 12.6. 多角形・折れ線を表すクラス

クラス名 図形の種類 解説
SFXPolygon 多角形 多角形を表すクラスです。
SFXPolyline 折れ線 折れ線を表すクラスです。

図 12.7. 多角形

多角形

図 12.8. 折れ線

折れ線
[Caution] ピクセルの配列

頂点を表すピクセルの配列が破壊されないように注意します。

例 12.29. 多角形と折れ線の描画

// 多角形の頂点
SFXPixel pixel[5];
pixel[0].Set(30, 80);
pixel[1].Set(35, 50);
pixel[2].Set(130, 30);
pixel[3].Set(180, 40);
pixel[4].Set(190, 90);

// 多角形の定義 ( 頂点の配列とサイズを設定する )
SFXPolygon polygon(&pixel[0], lengthof(pixel));

// 多角形の描画
graphics->DrawPolygon(polygon);

// 折れ線の頂点
SFXPixel pixel[5];
pixel[0].Set(30, 80);
pixel[1].Set(35, 50);
pixel[2].Set(130, 30);
pixel[3].Set(180, 40);
pixel[4].Set(190, 90);

// 折れ線の定義 (頂点の配列とサイズを設定する)
SFXPolyline polyline(&pixel[0], lengthof(pixel));

// 折れ線の描画
graphics->DrawPolyline(polyline);

12.2.7. 図形の演算

SFXRectangle には比較、判定、演算のための関数があります。

例 12.30. 図形の演算

SFXRectangle rectangle1(10, 20, 30, 40);
SFXRectangle rectangle2(20, 10, 30, 40);
SFXRectangle rectangle3;

// 比較
if (rectangle1 == rectangle2) {             
    // rectangle1 と rectangle2 が一致するとき
    
}

// 長方形が有効かどうか
if (rectangle1.IsEmpty()) {                 
    // 幅が 0 以下、または高さが 0 以下のとき
   
}

// 長方形の包含関係
if (rectangle1.IsInsideOf(rectangle2)) {    
    // rectangle1 が rectangle2 に含まれるとき
    
}

// 2 つの長方形の重なった部分を取得する
rectangle3 = rectangle1.Intersection(rectangle2);

// 長方形の重なり判定
if (rectangle1.IntersectsWith(rectangle2)) { 
    // 2 つの長方形の重なった部分が存在するとき
    
}

// 2つの長方形を含む長方形を取得する
rectangle3 = rectangle1.Union(rectangle2);

// 2つの長方形を含む長方形が存在するか判定する
if (rectangle1.UnifiesWith(rectangle2)) {    
    // 2つの長方形を含む長方形が存在するとき
   
}

// 幅と高さが負の場合は正にする
rectangle1.Normalize();

例 12.31. 演算の連結

// rectangle の高さを 50 ピクセル大きくし、下に 30 ピクセル移動した長方形を描画する
// ( rectangle 自身も変更される)
graphics->DrawRectangle(rectangle.AddHeight(50).AddY(30));

// rectangle の底辺の始点を 20 ピクセル右に移動し、終点を 40 ピクセル下に動かた、直線を描画する
// ( rectangle は変更されない )
graphics->DrawLine(rectangle.GetEdgeBottom().AddStartX(20).AddEndY(40));

// SFXGraphics::GetDeviceRectangle() で取得した画面サイズの長方形を縮小し、移動して表示する
graphics->DrawRectangle(SFXGraphics::GetDeviceRectangle().Deflate(40, 20).AddY(10));

// 左上の点 (30, 20) 、幅 40 ピクセル、高さ 10 ピクセルの長方形を左右に 5 ピクセル、上下に 10 ピクセル拡大した長方形を描画する
graphics->DrawRectangle(SFXRectangle(30, 20, 40, 10).Inflate(5, 10));

12.2.8. const 図形

図形クラスの定数オブジェクトは生成時にコンストラクタが呼び出されるので、その分オーバーヘッドが生じます。

例 12.32. const 図形

SFXRectangleConst rectangle(10, 20, 30, 40); // rectangle は定数だが、コンストラクタは呼び出される
SFXLineConst line(50, 60, 70, 80);           // line は定数だが、コンストラクタは呼び出される

graphics->DrawRectangle(rectangle);

graphics->DrawLine(line);

AtomRec 構造体を用いて定数オブジェクトを生成すると、コンストラクタは呼び出されないので、オーバーヘッドはありません。

例 12.33. AtomRec 構造体を用いた const 図形

// rectangle は定数 ( コンストラクタは呼び出されない )
static SFXRectangle::AtomRecConst rectangle = {
    10, 20, 30, 40
};

// line は定数 ( コンストラクタは呼び出されない )
static SFXLine::AtomRecConst line = {
    50, 60, 70, 80
};

graphics->DrawRectangle(rectangle);

graphics->DrawLine(line);

12.2.9. クリッピング

クリッピングとは、長方形や円、三角形、多角形など、指定した図形からはみだした部分を描画しないようにする機能です。

SFXClip はクリッピングのための図形を表すクラスです。

12.2.9.1. 長方形でクリッピングする方法

下の図では、長方形で文字列をクリッピングしています。

図 12.9. 文字列のクリッピング

文字列のクリッピング

例 12.34. 長方形でクリッピングする方法

// 黒色
SFXRGBColor black(0x00, 0x00, 0x00, 0x00);

// 長方形
SFXRectangle rectangle(10, 10, 150, 55);

// 外枠を描画
graphics->DrawRectangle(rectangle, black);

// クリッピングを長方形にする
SFXClip clip(rectangle);

// クリッピングを設定する
graphics->SetClip(rectangle);

// 長方形の左上
SFXGrid grid = rectangle.GetLeftTop();

// フォントの高さ
SInt32 fontHeight = graphics->GetFontHeight();

// 文字列を描画する
graphics->DrawText("test clipping", grid, black);

// 文字列の描画 ( grid.AddY(fontHeight) で描画位置を fontHeight だけ下にずらしている )
graphics->DrawText("test clipping", grid.AddY(fontHeight), black);
graphics->DrawText("test clipping", grid.AddY(fontHeight), black);

12.2.9.2. 長方形以外でクリッピングする方法

SFXRectangle 以外の図形でクリッピングする場合、SFXGraphics ではなく、SFBGraphics インスタンスを使います。

例 12.35. 長方形以外でクリッピングする方法

// SFBGraphics インターフェースを取得する
SFBGraphicsSmp g = graphics->GetSFBGraphics();

// 円
SFXCircle circle(100, 50, 40);

// クリッピングを円にする
SFXClip clip(circle);

// クリッピングを設定する
g->SetClip(&clip, AEE_GRAPHICS_FRAME);

// 塗りつぶす色を設定する
g->SetFillColor(SFXRGBColor(0x99, 0x99, 0x99, 0x00));

// 長方形を描画する
g->DrawRect(&SFXRectangle(55, 5, 60, 80));

図 12.10. 実行結果

実行結果

長方形が円でクリッピングされています。