この章では、表示モデル（GUIの出力部分）を紹介し、使用例や画面座標、線、色などの基本概念を説明します。
12.1 なぜグラフィックスが必要なのでしょうか?
グラフィックスに 4 章、GUI に 1 章を費やすのはなぜですか?
- グラフィックは便利です。たとえば、科学計算やデータ分析にはデータ グラフィックスが必要です。
- グラフィックは楽しいですね。コードの効果をすぐに表示できます。
- グラフィックには、読むと興味深いコードがたくさん表示されます。プログラミングの学習には、たくさんのコードを読んで、優れたコードの感触を得ることが含まれます。
- グラフィックデザインのサンプルが豊富にあります。グラフィックスの分野には、設計上の決定や設計手法の具体的で実用的な例が豊富にあります。
- グラフィックは、オブジェクト指向プログラミングの概念と言語の機能を説明するのに役立ちます。グラフィックは、オブジェクト指向設計の非常にわかりやすい例をいくつか示しています。
- 一部の主要なグラフィックスの概念は単純ではありません。
12.2 表示モデル
iostream ライブラリは、文字指向の入出力ストリームです。この章と次の 4 章では、コンピュータ画面に直接表示できるグラフィックスとグラフィカルユーザー インターフェイス(GUI) という別のテクノロジを紹介します。グラフィックスには点、線、長方形、円などの形状が含まれ、GUI にはウィンドウ、ボタン、入力ボックスなどのウィジェットが含まれます。
基本モデルは次のとおりです: グラフィックス ライブラリによって提供される基本グラフィックス (線など) を使用して、より複雑なグラフィックス (ポリゴンなど) を結合し、これらのグラフィックス オブジェクトを物理画面を表すウィンドウ オブジェクトにアタッチします。これらのグラフィックを画面上に描画するためのディスプレイ エンジン (グラフィック ライブラリ/GUI ライブラリ)。
12.3 最初の例
次のプログラムは、画面上に三角形を描画します。
操作の結果は次のようになります。
このプログラムを一行ずつ分析してみましょう。まず、(作成者が提供した) グラフィックス ライブラリ ヘッダー ファイルをインクルードします。
#include "Graph.h" // get access to our graphics library facilities
#include "Simple_window.h" // get access to our window library
次に、グラフィックス関連のクラスが名前空間にあることをコンパイラに伝えますGraph_lib。
using namespace Graph_lib; // our graphics facilities are in Graph_lib
次に、次のmain()場所にウィンドウを作成しますwin。
Point tl(100, 100); // to become top left corner of window
Simple_window win(tl, 600, 400, "Canvas"); // make a simple window
このうち、tl画面上のウィンドウの左上隅の座標を表し、幅と高さはそれぞれ600ピクセルと400ピクセルで、ウィンドウの左上隅のタイトルバーに「Canvas」という文字列が表示されます。窓。
次に、ポリゴン オブジェクトを作成しpoly、3 つの点を追加して三角形を取得します。
Graph_lib::Polygon poly; // make a shape (a polygon)
poly.add(Point(300, 200)); // add a point
poly.add(Point(350, 100)); // add another point
poly.add(Point(400, 200)); // add a third point
ここでの点はウィンドウ内の座標を表します。
次に、三角形の辺を赤に設定します (表示のみを目的としています)。
poly.set_color(Color::red); // adjust properties of poly
最後に、polyウィンドウにアタッチしますwin。
win.attach(poly); // connect poly to the window
そうして初めてグラフが描画されます。プログラムの最後の行
win.wait_for_button(); // give control to the display engine
wait_for_button()GUI システムに制御を与え、GUI システムにウィンドウを表示するように指示します (ウィンドウにアタッチされたグラフィックスを描画している間)。その後、ユーザーが（Simple_window含まれる）「次へ」ボタンをクリックするまで待機します。ボタンをクリックするとプログラムが終了し、ウィンドウが閉じます。
OS は各ウィンドウにタイトル バー/フレームを追加するので、右上隅に 3 つのボタンが「無料」で表示されます。
12.4 GUIライブラリの使用
GUI プログラムを作成するには、GUI ライブラリ (ウィンドウやグラフィックスを描画するためにオペレーティング システムの基礎となるインターフェイスを呼び出すために使用されます) を使用する必要があります。ただし、C++ には標準の GUI ライブラリが提供されていないため、作成者は利用可能な多数のC++ GUI ライブラリの中から1 つを選択します。
この本で使用されている GUI ライブラリは FLTK (Fast Light Toolkit、「フルティック」と発音) と呼ばれ、fltk.orgからダウンロードできます。私たちのコードは、FLTK を使用するあらゆるプラットフォーム (Windows、Linux、macOS など) に移植可能です。
注: この本のコードでは FLTK を直接使用せず、著者が提供する GUI ライブラリを使用します。この GUI ライブラリは、FLTK をベースにカプセル化された別の層であり、図形や GUI コンポーネントのインターフェイス クラスを提供します (特に説明がない場合、後述の「GUI ライブラリ」は作者が提供する GUI ライブラリを指します)。
GUI ライブラリのソース コードは、作者の Web サイトからダウンロードできます: https://www.stroustrup.com/Programming/code.tar
注: コードにはいくつかのコンパイル エラーがあるため、次のように変更する必要があります。
- Window.h:先頭に2
#includeつと 2 つの宣言を追加します。using
#include <string>
#include <vector>
// ...
using std::string;
using std::vector;
// ...
- Simple_window.h:
struct Simple_window : Windowに変更しますstruct Simple_window : Graph_lib::Window - Graph.h :
Vector_ref(const Vector<T>&);そしてVector_ref& operator=(const Vector<T>&);、VectorVector_ref
この GUI ライブラリは、5 つのヘッダー ファイルと 4 つのソース ファイルで構成されます。
- ヘッドファイル
- ポイント.h
- Window.h
- シンプル_ウィンドウ.h
- グラフ.h
- GUI.h
- ソースファイル
- ウィンドウ.cpp
- Simple_window.cpp
- グラフ.cpp
- GUI.cpp
ヘッダファイル間の包含関係は以下のとおりです。
このうち、Window.h、Simple_window.h、GUI.h はWindow、Simple_window、 などButtonの GUI コンポーネントを提供します。クラス図は次のとおりです。
Graph.h は、、などのシェイプ クラスShapeとサブクラスを提供します。クラス図は次のとおりです。LineRectangleCircle
12.8 プログラムの実行
注: 第 6 章と同様、この章の作成者は最後のセクションまでプログラムを実行する方法については説明しません (本文では詳細は説明されておらず、付録 D のみが言及されており、付録 D では Visual Studio の使用方法が紹介されているだけです)。 .メソッド）。実はこれが初心者にとって最も難しい部分です。ビルド方法はオペレーティング システムや使用するビルド ツールによって異なりますが、基本的には次の手順が含まれます。
- FLTK ソース コードをコンパイルし、FLTK ライブラリ ファイルを生成します。
- GUI ライブラリのソース コードをコンパイルし、GUI ライブラリ ファイルを生成します。
- 独自のソースコードをコンパイルし、GUI ライブラリと FLTK ライブラリにリンクして実行ファイルを生成します。
MakeとCMakeを使った以下の2つの構築方法を詳しく紹介します。
12.8.1 Makeの使用
12.8.1.1 FLTKのインストール
このセクションでは、Make コマンドを使用して FLTK ライブラリをコンパイルし、Ubuntu システムにインストールします。
まず、 FLTK 公式 Web サイトからソースコード (例: fltk-1.3.8-source.tar.gz) をダウンロードし、解凍後に次のコマンドを実行します。
cd fltk-1.3.8/
./configure --prefix=/usr/local
make
sudo make install
sudo ldconfig
このうち、configureコマンドはビルド構成ファイルの生成に使用され、--prefixオプションはインストール パスを指定し、ヘッダー ファイルは $prefix/include ディレクトリにコピーされ、ライブラリ ファイルは $prefix/lib ディレクトリにコピーされます。「構成で必要な X11 ライブラリが見つかりませんでした。中止します」というエラーが報告された場合は、まず X11 ライブラリをインストールする必要があります。
sudo apt-get install libx11-dev
makeこのコマンドは、ソース コードをライブラリ ファイルにコンパイルし、このファイルは fltk-1.3.8/lib ディレクトリに生成されます。make installコマンドは、ヘッダ ファイル、コンパイルされたライブラリ ファイル、および実行可能ファイルを、--prefixオプションで指定されたディレクトリ (ここでは /usr/)にコピーします。ローカル）：
$ cd /usr/local
$ ls bin/
fltk-config fluid ...
$ ls include/
FL ...
$ ls lib/
lib/libfltk.a lib/libfltk_images.a lib/libfltk_png.a
lib/libfltk_forms.a lib/libfltk_jpeg.a lib/libfltk_z.a
...
その中で、fltk-config は、コンパイルとリンクのオプションを自動的に生成できる補助プログラムです。
$ fltk-config --cxx
g++
$ fltk-config --cxxflags
-I/usr/local/include -I/usr/local/include/FL/images -D_LARGEFILE_SOURCE -D_LARGEFILE64_SOURCE -D_THREAD_SAFE -D_REENTRANT
$ fltk-config --ldflags
-L/usr/local/lib -lfltk -lpthread -ldl -lm -lX11
たとえば、 FLTK の公式ドキュメント「最初の FLTK プログラムの作成」にある Hello World プログラムは次のとおりです。
#include <FL/Fl.H>
#include <FL/Fl_Box.H>
#include <FL/Fl_Window.H>
int main(int argc, char* argv[]) {
Fl_Window* window = new Fl_Window(340, 180);
Fl_Box* box = new Fl_Box(20, 40, 300, 100, "Hello, World!");
box->box(FL_UP_BOX);
box->labelfont(FL_BOLD_ITALIC);
box->labelsize(36);
box->labeltype(FL_SHADOW_LABEL);
window->end();
window->show(argc, argv);
return Fl::run();
}
プログラムは次のコマンドでコンパイルできます。
g++ `fltk-config --cxxflags` -o hello_fltk hello_fltk.cpp `fltk-config --ldflags`
このコマンドは以下と同等です
g++ -I/usr/local/include -I/usr/local/include/FL/images -D_LARGEFILE_SOURCE -D_LARGEFILE64_SOURCE -D_THREAD_SAFE -D_REENTRANT -o hello_fltk hello_fltk.cpp -L/usr/local/lib -lfltk -lpthread -ldl -lm -lX11
操作の結果は次のようになります。
さらに、fltk-config には、より便利なコマンドも用意されています。
fltk-config --compile hello_fltk.cpp
このコマンドは、コンパイルオプションとリンクオプションを自動的に一つのコンパイルコマンドにまとめて実行するもので、上記のコンパイルコマンドと同等です。
注: /usr/local/include と /usr/local/lib はデフォルトのヘッダー ファイルとライブラリ ファイルの検索パス リストに含まれているため、コンパイル コマンドの-Iとオプションを省略でき、これ-Lにより、
g++ -o hello_fltk hello_fltk.cpp -lfltk -lpthread -ldl -lm -lX11
FLTKをアンインストールするには、fltk-1.3.8ディレクトリで実行します。
sudo make uninstall
参考：
- FLTK 公式ドキュメントUNIX および Apple OS X での FLTK のビルドとインストール
12.8.1.2 GUIライブラリのコンパイル
FLTK をインストールした後、作成者が提供する GUI ライブラリのソース コードをライブラリ ファイルにコンパイルします。
まずソースコードcode.tarをダウンロードし、GUI ディレクトリを解凍し、セクション 12.4 の方法に従ってコンパイル エラーを修正します。作成者が提供するソース コードには既に Makefile が含まれているため、GUI ディレクトリでコマンドを直接実行して、makeソース コードと同じディレクトリにライブラリ ファイル libbookgui.a をビルドします。
12.8.1.3 独自のプログラム コードをコンパイルする
セクション 12.3 のプログラムが ch12/draw_triangle.cpp に保存され、ディレクトリ ch12 と GUI が同じディレクトリにあると仮定します。
PPP-code/
GUI/
Window.h
Graph.h
...
libbookgui.a
ch12/
draw_triangle.cpp
ch12 ディレクトリで次のコマンドを実行します。
g++ -I../GUI -o draw_triangle draw_triangle.cpp -L../GUI -lbookgui `fltk-config --ldflags --use-images`
実行ファイルdraw_triangleを取得できます。このうち、-I../GUIオプションはコンパイラに GUI ヘッダー ファイルの検索パスを伝え、#include "Graph.h"GUI ディレクトリで Graph.h を見つけられるようにし、-L../GUIこのオプションはリンカに GUI ライブラリ ファイルの検索パスを伝え、-lbookguilibbookgui を見つけられるようにします。 .a を GUI ディレクトリに追加すると、fltk-config --ldflags --use-images必要なリンクされた FLTK ライブラリが自動的に生成されます。
操作の結果は次のようになります。
12.8.2 CMake の使用 (推奨)
CMakeはオープン ソースのクロスプラットフォーム C++ ビルド ツールであり、FLTK の新しいバージョンはすでに CMake ビルドをサポートしています。CMake を使用してビルドすることには、Make に比べて次の利点があります。
- シンプルで複雑なコンパイル コマンドを手動で記述する必要はありません
- FLTK を手動でインストールする必要はありません。CMake を使用するモジュールは
FetchContent自動的に FLTK ライブラリをダウンロードしてビルドできます。 - CMake はクロスプラットフォームなので、Windows、Linux、macOS システムで動作します。
- コマンドラインで使用できるだけでなく、CMake をサポートするあらゆる IDE (CLion、Visual Studio など) にも適用できます。
CMakeのインストールについては、CMakeビルドツールの使い方チュートリアルを参照してください。CMake は、CMakeLists.txt というファイルを使用してビルド ターゲットを宣言します。プロジェクトのルート ディレクトリ、GUI ディレクトリ、および ch12 ディレクトリに CMakeLists.txt ファイルを作成します。
PPP-code/
CMakeLists.txt
GUI/
CMakeLists.txt
Window.h
Graph.h
...
ch12/
CMakeLists.txt
draw_triangle.cpp
ルート ディレクトリの CMakeLists.txt の内容は次のとおりです。
cmake_minimum_required(VERSION 3.20)
project(PPP_code)
set(CMAKE_CXX_STANDARD 14)
include(FetchContent)
set(FLTK_BUILD_TEST OFF CACHE BOOL " " FORCE)
FetchContent_Declare(
fltk
GIT_REPOSITORY https://github.com/fltk/fltk.git
GIT_TAG release-1.3.8
)
FetchContent_MakeAvailable(fltk)
add_subdirectory(GUI)
add_subdirectory(ch12)
このうち、FetchContent_Declare()コマンドは fltk ライブラリとその Git ウェアハウス アドレスを宣言しており、FetchContent_MakeAvailable()fltk ライブラリのソース コードが自動的にダウンロードされます。
GUI/CMakeLists.txt の内容は次のとおりです。
file(GLOB SOURCES RELATIVE ${CMAKE_CURRENT_SOURCE_DIR} *.cpp)
add_library(GUI ${SOURCES})
target_link_libraries(GUI fltk fltk_images)
target_include_directories(GUI PUBLIC ${fltk_SOURCE_DIR} ${fltk_BINARY_DIR})
target_include_directories(GUI INTERFACE ${CMAKE_CURRENT_SOURCE_DIR})
ここでは、ライブラリ ファイル GUI が宣言され、fltk および fltk_images ライブラリにリンクされています。
ch12/CMakeLists.txtの内容は以下のとおりです。
add_executable(draw_triangle draw_triangle.cpp)
target_link_libraries(draw_triangle GUI)
ここでは、実行可能ファイルdraw_triangleが宣言され、GUIライブラリにリンクされています(CMakeは自動的に推移的な依存関係を処理し、それをfltkライブラリにリンクします)。
プロジェクトのルート ディレクトリで次のコマンドを実行します。
cmake -G "Unix Makefiles" -B cmake-build
cmake --build cmake-build --target draw_triangle
CMake は最初のビルド時に FLTK ライブラリを自動的にダウンロードしてビルドします。ビルドが完了すると、実行可能ファイル cmake-build/ch12/draw_triangle が取得できるので、それを実行すると上記と同じ効果が得られます。
注: ここで示したメソッドは、私自身のコード ウェアハウスPPP-codeで使用されているメソッドです。
参考：
12.8.3 Visual Studio の使用
参考：
12.5 座標系
コンピュータ画面は、ピクセルで構成される長方形の領域です。ピクセルは、特定の色に設定できる点です。プログラムで画面をモデル化する最も一般的な方法は、ピクセルで構成される四角形です。各ピクセルは x (水平) 座標と y (垂直) 座標によって決定され、画面の左上隅が座標の原点になります。 、下の図に示すように。
数学の座標系とは異なり、y 座標は下に向かって成長します。
GUI プログラムにおいて、ウィンドウは画面から分割され、プログラムによって制御される長方形の領域です。ウィンドウは小さな画面と考えることができます (ウィンドウ内の座標系は画面と同じ方法でモデル化されます)。例えば：
Simple_window win(tl, 600, 400, "Canvas");
幅 600 ピクセル、高さ 400 ピクセル (タイトル バーを除く) のウィンドウを作成します。ウィンドウ内の x 座標は左から右に 0 ～ 599、y 座標は上から右に 0 ～ 399 になります。底。描画できるウィンドウの領域は、多くの場合、キャンバスと呼ばれます。
12.6 形状
GUI ライブラリのヘッダー ファイル Graph.h は、形状クラスのセットを定義します。セクション 12.4 を参照してください。
12.7 形状クラスの使用
このセクションでは、GUIライブラリのいくつかの基本的な機能を紹介します。、、、、、、、、、、、、、、、、、、、、、やりとSimple_window、特定のクラスの詳細な理解ではなく、これらの機能を包括的に理解することですWindow。次の章では、各クラスの設計を紹介します。ShapeTextPolygonLineLinesRectangleColorLine_stylePointAxis
12.7.1 グラフィックヘッダファイルとメイン関数
まず、GUI ライブラリのヘッダー ファイルをインクルードする必要があります。
#include "Graph.h"
#include "Window.h"
または
#include "Graph.h"
#include "Simple_window.h"
Window.h にはウィンドウに関連する機能が含まれており、Graph.h にはウィンドウ上の図形 (テキストを含む) の描画に関連する機能が含まれています。これらのプロパティは名前空間で定義されますGraph_lib。簡単にするために、 useusingディレクティブにより、プログラムはGraph_lib名前を直接使用します。
using namespace Graph_lib;
12.7.2 ほとんど空白のウィンドウ
Point tl(100, 100); // top left corner of our window
Simple_window win(tl, 600, 400, "Canvas");
// screen coordinate tl for top left corner
// window size(600*400)
// title: Canvas
win.wait_for_button(); // display!
このコードはSimple_window、「次へ」ボタン、左上隅 (100, 100)、幅と高さ 600、高さ 400、「キャンバス」というタイトルのウィンドウを作成します。を呼び出すことでGUI システムに制御が与えられwin.wait_for_button()、下図に示すように画面上にウィンドウが描画されます。
12.7.3 軸
Axis xa(Axis::x, Point(20, 300), 280, 10, "x axis"); // make an Axis
win.attach(xa); // attach xa to the window, win
Axis ya(Axis::y, Point(20, 300), 280, 10, "y axis");
ya.set_color(Color::cyan); // choose a color
ya.label.set_color(Color::dark_red); // choose a color for the text
win.attach(ya);
このコードは、原点が (20, 300) (ウィンドウ座標系)、長さが 280、ティックが 10 であるx 軸 ( Axis::x) と y 軸 ( ) を作成します。Axis::y描画できるように、を呼び出してwin.attach()軸オブジェクトをウィンドウにアタッチします。
12.7.4 関数グラフのプロット
正弦関数グラフをプロットしてみましょう。
Function sine(sin, 0, 100, Point(20, 150), 1000, 50, 50); // sine curve
win.attach(sine);
このうち、命名されたオブジェクトは、標準ライブラリ関数で生成された関数値を使用して正弦曲線を描画し、独立変数の範囲は[0, 100)であり、(20, 150)を「原点」として使用し、sine合計1000 個の点が描画され、X 座標と Y 座標が 50 倍にズームされFunctionますsin()
ウィンドウの長方形領域の外側の点は GUI システムによって無視されることに注意してください。
12.7.5 ポリゴン
多角形は、Polygon線で結ばれた一連の点として記述されます。
Polygon poly;
poly.add(Point(300, 200)); // three points make a triangle
poly.add(Point(350, 100));
poly.add(Point(400, 200));
poly.set_color(Color::red);
poly.set_style(Line_style::dash);
win.attach(poly);
12.3 節の例と同様に、多角形の例として三角形を追加し、色と線種を設定します。すべての図形には線の種類があり、Line_style::solidデフォルトでは実線 ( ) ですが、Line_style::dashここでは破線 ( ) です。
12.7.6 長方形
長方形は最も扱いやすい形状です。たとえば、長方形は記述しやすく (左上隅、幅と高さ、または左上隅と右下隅など)、点が長方形内にあるかどうかを判断しやすく、長方形をすばやく描画するのが簡単です。ハードウェアのピクセル数。
ほとんどのグラフィックス ライブラリは、他の閉じた形状よりも長方形をうまく処理します。そこで、Polygonクラスとは独立したクラスを用意しますRectangle。Rectangle左上隅、幅、高さで説明します。
Graph_lib::Rectangle r(Point(200, 200), 100, 50); // top left corner, width, height
win.attach(r);
長方形のように見えるものを作成できますClosed_polyline。
Closed_polyline poly_rect;
poly_rect.add(Point(100, 50));
poly_rect.add(Point(200, 50));
poly_rect.add(Point(200, 100));
poly_rect.add(Point(100, 100));
win.attach(poly_rect);
poly_rect描画結果は四角形ですが、メモリ上のオブジェクトではありませんRectangle。それを証明する最も簡単な方法は、もう 1 つのポイントを追加することです。
poly_rect.add(Point(50, 75));
この時点で、描画結果は長方形ではなくなります。
たまたま長方形のように見えるのではなくRectangle、基本的に長方形であることが保証されています。
12.7.7 パディング
以前に描画した形状はアウトラインですが、色で塗りつぶすこともできます。
r.set_fill_color(Color::yellow); // color the inside of the rectangle
poly.set_style(Line_style(Line_style::dash, 4));
poly_rect.set_style(Line_style(Line_style::dash, 2));
poly_rect.set_fill_color(Color::green);
任意の閉じた形状を塗りつぶすことができます。
12.7.8 テキスト
テキストはオブジェクトを使用してTextどこにでも配置できます。
Text t(Point(150, 150), "Hello, graphical world!");
win.attach(t);
(150, 150) はテキスト ボックスの左下隅の座標です。
上の画像の基本的なグラフィック要素を使用して、任意の複雑で微妙な表示を構築できます。この章のコードにはループや選択ステートメントがなく、すべてのデータは「ハードコーディング」されており、出力は基本的なグラフィック要素の単純な組み合わせにすぎないことに注意してください。データとアルゴリズムを使用してこれらの基本的なグラフを結合し始めると、物事が面白くなり始めます。
12.7.3項の軸ラベルは文字色を変更するTextことで変更できるオブジェクトです。set_color()さらに、フォントとフォント サイズを設定することもできます。
t.set_font(Font::times_bold);
t.set_font_size(20);
12.7.9 画像
画像はファイルからロードできます。
Image ii(Point(100, 50), "img/image.jpg"); // 400*212-pixel jpg
win.attach(ii);
画像が大きすぎる場合は、ウィンドウ領域を超える部分が「トリミング」されます。
注: ファイル名「img/image.jpg」は作業ディレクトリを基準とした相対パスであるため、プログラムは img が配置されているディレクトリで実行する必要があります。そうしないとファイルが見つかりません。プログラムがコマンド ラインで実行される場合、作業ディレクトリはコマンド ラインの現在の作業ディレクトリになります。
# working directory is "/home/zzy/PPP-code/ch12"
[zzy@ubuntu ~/PPP-code/ch12]$ ../cmake-build/ch12/shape_primitives
IDE でプログラムを実行している場合は、作業ディレクトリを手動で設定できます。
12.7.10 など
次のコードは、グラフィック ライブラリのその他の機能を示しています。
Circle c(Point(100, 200), 50);
win.attach(c);
Ellipse e(Point(100, 200), 75, 25);
e.set_color(Color::dark_red);
win.attach(e);
Mark m(Point(100, 200), 'x');
win.attach(m);
std::ostringstream oss;
oss << "screen size: " << x_max() << '*' << y_max()
<< "; window size: " << win.x_max() << '*' << win.y_max();
Text sizes(Point(100, 20), oss.str());
win.attach(sizes);
Image cal(Point(225, 225), "img/snow_cpp.gif"); // 320*240-pixel gif
cal.set_mask(Point(40, 40), 200, 150); // display center part of image
win.attach(cal);
完全なコード:
