Share via

チュートリアル: MFC プロジェクトへの D2D オブジェクトの追加

  • [アーティクル]

このチュートリアルでは、基本的な Direct2D (D2D) オブジェクトを Visual C++、Microsoft Foundation Class ライブラリ (MFC) プロジェクトに追加し、グラデーションの背景に「Hello, World!」を出力するアプリケーションにプロジェクトをビルドする方法について説明します。

このチュートリアルでは、次のタスクを実行する方法について説明します。

  • MFC アプリケーションを作成する。

  • 単色ブラシと線形グラデーション ブラシを作成する。

  • グラデーション ブラシを変更して、ウィンドウのサイズが変更されると適切に変更されるようにする。

  • D2D 描画ハンドラーを実装する。

  • 結果を確認しましょう。

Note

次の手順で参照している Visual Studio ユーザー インターフェイス要素の一部は、お使いのコンピューターでは名前や場所が異なる場合があります。 これらの要素は、使用している Visual Studio のエディションや独自の設定によって決まります。 詳細については、「IDE をカスタマイズする」をご覧ください。

前提条件

このチュートリアルを完了するには、Visual Studio が、C++ によるデスクトップ開発ワークロードとオプションの x86 用と x64 用の Visual C++ MFC コンポーネントと共にインストールされている必要があります。

MFC アプリケーションを作成するには

  1. MFC アプリケーション ウィザードを使用して、MFC アプリケーションを作成します。 お使いのバージョンの Visual Studio のウィザードを開く方法については、「チュートリアル: 新しい MFC シェル コントロールの使用」を参照してください。

  2. [名前] ボックスに「MFCD2DWalkthrough」と入力します。 OK を選択します。

  3. MFC アプリケーション ウィザードで、設定を変更せずに [完了] を選択します。

単色ブラシと線形グラデーション ブラシを作成するには

  1. ソリューション エクスプローラーの [MFCD2DWalkthrough] プロジェクトの [ヘッダー ファイル] フォルダーで、MFCD2DWalkthroughView.h を開きます。 次のコードを CMFCD2DWalkthroughView クラスに追加し、3 つのデータ変数を作成します。

    CD2DTextFormat* m_pTextFormat;
CD2DSolidColorBrush* m_pBlackBrush;
CD2DLinearGradientBrush* m_pLinearGradientBrush;

    ファイルを保存して閉じます。

  2. [ソース ファイル] フォルダーで、MFCD2DWalkthroughView.cpp を開きます。 CMFCD2DWalkthroughView クラスのコンストラクターで、次のコードを追加します。

    // Enable D2D support for this window:
EnableD2DSupport();

// Initialize D2D resources:
m_pBlackBrush = new CD2DSolidColorBrush(
    GetRenderTarget(),
    D2D1::ColorF(D2D1::ColorF::Black));

m_pTextFormat = new CD2DTextFormat(
    GetRenderTarget(),
    _T("Verdana"),
    50);

m_pTextFormat->Get()->SetTextAlignment(
    DWRITE_TEXT_ALIGNMENT_CENTER);

m_pTextFormat->Get()->SetParagraphAlignment(
    DWRITE_PARAGRAPH_ALIGNMENT_CENTER);

D2D1_GRADIENT_STOP gradientStops[2];

gradientStops[0].color =
    D2D1::ColorF(D2D1::ColorF::White);

gradientStops[0].position = 0.f;
gradientStops[1].color =
    D2D1::ColorF(D2D1::ColorF::Indigo);

gradientStops[1].position = 1.f;

m_pLinearGradientBrush = new CD2DLinearGradientBrush(
    GetRenderTarget(),
    gradientStops,
    ARRAYSIZE(gradientStops),
    D2D1::LinearGradientBrushProperties(
        D2D1::Point2F(0,0),
        D2D1::Point2F(0,0)));

    ファイルを保存して閉じます。

グラデーション ブラシを変更して、ウィンドウのサイズが変更されると適切に変更されるようにするには

  1. [プロジェクト] メニューの [クラス ウィザード] を選択します。

  2. [MFC クラス ウィザード] の [クラス名] の下で、CMFCD2DWalkthroughView を選択します。

  3. [メッセージ] タブの [メッセージ] ボックスで、WM_SIZE を選択し、[ハンドラーの追加] を選択します。 このアクションにより、OnSize メッセージ ハンドラーが CMFCD2DWalkthroughView クラスに追加されます。

  4. [既存のハンドラー] ボックスで、OnSize を選択します。 [コードの編集] を選択し、CMFCD2DWalkthroughView::OnSize メソッドを表示します。 メソッドの末尾に、次のコードを追加します。

    m_pLinearGradientBrush->SetEndPoint(CPoint(cx, cy));

    ファイルを保存して閉じます。

D2D 描画ハンドラーを実装するには

  1. [プロジェクト] メニューの [クラス ウィザード] を選択します。

  2. [MFC クラス ウィザード] の [クラス名] の下で、CMFCD2DWalkthroughView を選択します。

  3. [メッセージ] タブで、[カスタム メッセージの追加] を選択します。

  4. [カスタム メッセージの追加] ダイアログ ボックスの [Custom Windows Message (カスタム Windows メッセージ)] ボックスに、「AFX_WM_DRAW2D」と入力します。 [Message handler name (メッセージ ハンドラー名)] ボックスに、「OnDraw2D」と入力します。 [登録済みメッセージ] オプションを選択し、[OK] を選択します。 このアクションにより、AFX_WM_DRAW2D メッセージのメッセージ ハンドラーが CMFCD2DWalkthroughView クラスに追加されます。

  5. [既存のハンドラー] ボックスで、OnDraw2D を選択します。 [コードの編集] を選択し、CMFCD2DWalkthroughView::OnDraw2D メソッドを表示します。 CMFCD2DWalkthroughView::OnDrawD2D メソッドには次のコードを使用します。

    afx_msg LRESULT CMFCD2DWalkthroughView::OnDraw2D(
    WPARAM wParam,
    LPARAM lParam)
{
    CHwndRenderTarget* pRenderTarget = (CHwndRenderTarget*)lParam;
    ASSERT_VALID(pRenderTarget);

    CRect rect;
    GetClientRect(rect);

    pRenderTarget->FillRectangle(rect, m_pLinearGradientBrush);

    pRenderTarget->DrawText(
        _T("Hello, World!"),
        rect,
        m_pBlackBrush,
        m_pTextFormat);

    return TRUE;
}

    ファイルを保存して閉じます。

結果を確認するには

アプリケーションをビルドして実行します。 ウィンドウのサイズを変更すると変化するグラデーションの四角形が必要です。 その四角形の中央に、「Hello World!」が表示されます。

関連項目

チュートリアル