Geometrie ścieżek — omówienie

2025-03-22

W tym temacie opisano sposób używania geometrii ścieżek Direct2D do tworzenia złożonych rysunków. Zawiera on następujące sekcje.

wymagania wstępne
Geometrie ścieżek w Direct2D
Użycie ID2D1GeometrySink do wypełniania geometrii ścieżki
przykład: tworzenie złożonego rysunku
Tematy pokrewne

Warunki wstępne

W tym omówieniu założono, że znasz tworzenie podstawowych aplikacji Direct2D zgodnie z opisem w Tworzenie prostej aplikacji Direct2D. Przyjęto również założenie, że znasz podstawowe funkcje geometrii Direct2D, zgodnie z opisem w Geometries Overview.

Geometrie ścieżek w direct2D

Geometrie ścieżek są reprezentowane przez interfejsID2D1PathGeometry. Aby utworzyć instancję geometrii ścieżki, wywołaj metodę ID2D1Factory::CreatePathGeometry. Te obiekty mogą służyć do opisywania złożonych figur geometrycznych składających się z segmentów, takich jak łuki, krzywe i linie. Aby wypełnić geometrię ścieżki figurami i segmentami, wywołaj metodę Open, aby pobrać ID2D1GeometrySink i użyć metod geometry sink, aby dodać figury i segmenty do geometrii ścieżki.

Używanie elementu ID2D1GeometrySink do tworzenia geometrii ścieżki

ID2D1GeometrySink opisuje ścieżkę geometryczną, która może zawierać linie, łuki, krzywe Beziera sześciennego i krzywe Beziera kwadratowego.

Ujście geometryczne składa się z co najmniej jednej figury. Każda ilustracja składa się z co najmniej jednej linii, krzywej lub segmentów łuku. Aby utworzyć rysunek, wywołaj metodę BeginFigure, przekazując punkt początkowy rysunku, a następnie użyj jej metod Add (takich jak AddLine i AddBezier) w celu dodania segmentów. Po zakończeniu dodawania segmentów wywołaj metodę EndFigure. Tę sekwencję można powtórzyć, aby utworzyć dodatkowe liczby. Po zakończeniu tworzenia rysunków wywołaj metodę Close.

Przykład: tworzenie złożonego rysunku

Na poniższej ilustracji przedstawiono złożony rysunek z liniami, łukami i krzywymi Beziera. Poniższy przykład kodu pokazuje, jak utworzyć rysunek przy użyciu czterech obiektów geometrii ścieżki: dla lewej góry, prawej góry, rzeki oraz słońca z promieniami.

ilustracja rzeki, gór i słońca, korzystając z geometrii ścieżek

Stwórz geometrię ścieżki dla lewej góry

W przykładzie najpierw zostanie utworzona geometria ścieżki dla lewej góry, jak pokazano na poniższej ilustracji.

Przedstawia złożony rysunek wielokąta, który pokazuje górę.

Aby utworzyć lewą górę, w przykładzie użyto metody ID2D1Factory::CreatePathGeometry do stworzenia ID2D1PathGeometry.

hr = m_pD2DFactory->CreatePathGeometry(&m_pLeftMountainGeometry);

Przykład następnie używa metody Open, aby uzyskać odbiór geometryczny z ID2D1PathGeometry, a następnie zapisuje go w zmiennej pSink.

ID2D1GeometrySink *pSink = NULL;
hr = m_pLeftMountainGeometry->Open(&pSink);

Następnie przykład wywołuje BeginFigure, przekazując D2D1_FIGURE_BEGIN_FILLED, co wskazuje, że figura jest wypełniona, następnie wywołuje AddLines, przekazując tablicę punktów D2D1_POINT_2F: (267, 177), (236, 192), (212, 160), (156, 255) i (346, 255).

Poniższy kod pokazuje, jak to zrobić.

pSink->SetFillMode(D2D1_FILL_MODE_WINDING);

pSink->BeginFigure(
    D2D1::Point2F(346,255),
    D2D1_FIGURE_BEGIN_FILLED
    );
D2D1_POINT_2F points[5] = {
   D2D1::Point2F(267, 177),
   D2D1::Point2F(236, 192),
   D2D1::Point2F(212, 160),
   D2D1::Point2F(156, 255),
   D2D1::Point2F(346, 255), 
   };
pSink->AddLines(points, ARRAYSIZE(points));
pSink->EndFigure(D2D1_FIGURE_END_CLOSED);

Utwórz geometrię ścieżki dla prawej góry

Przykład następnie tworzy kolejną geometrię ścieżki dla prawej góry z punktami (481, 146), (449, 181), (433, 159), (401, 214), (381, 199), (323, 263) i (575, 263). Na poniższej ilustracji przedstawiono sposób wyświetlania prawej góry.

ilustracja wielokąta przedstawiająca górę

Poniższy kod pokazuje, jak to zrobić.

        hr = m_pD2DFactory->CreatePathGeometry(&m_pRightMountainGeometry);
        if(SUCCEEDED(hr))
        {
            ID2D1GeometrySink *pSink = NULL;

            hr = m_pRightMountainGeometry->Open(&pSink);
            if (SUCCEEDED(hr))
            {
                pSink->SetFillMode(D2D1_FILL_MODE_WINDING);

                pSink->BeginFigure(
                    D2D1::Point2F(575,263),
                    D2D1_FIGURE_BEGIN_FILLED
                    );
                D2D1_POINT_2F points[] = {
                   D2D1::Point2F(481, 146),
                   D2D1::Point2F(449, 181),
                   D2D1::Point2F(433, 159),
                   D2D1::Point2F(401, 214),
                   D2D1::Point2F(381, 199), 
                   D2D1::Point2F(323, 263), 
                   D2D1::Point2F(575, 263)
                   };
                pSink->AddLines(points, ARRAYSIZE(points));
                pSink->EndFigure(D2D1_FIGURE_END_CLOSED);
            }
            hr = pSink->Close();

            SafeRelease(&pSink);
       }

Tworzenie geometrii ścieżki dla słońca

Następnie przykład wypełnia kolejną geometrię ścieżki dla słońca, jak pokazano na poniższej ilustracji.

ilustracja łuku i krzywych Béziera, które pokazują słońce

W tym celu geometria ścieżki tworzy zasobnik i dodaje figurę dla łuku oraz figurę dla każdego fajerwerka do tego zasobnika. Poprzez powtarzanie sekwencji BeginFigure, metod takich jak AddBezier, oraz EndFigure, do odbiornika dodawane są wielokrotnie różne figury.

Poniższy kod pokazuje, jak to zrobić.

        hr = m_pD2DFactory->CreatePathGeometry(&m_pSunGeometry);
        if(SUCCEEDED(hr))
        {
            ID2D1GeometrySink *pSink = NULL;

            hr = m_pSunGeometry->Open(&pSink);
            if (SUCCEEDED(hr))
            {
                pSink->SetFillMode(D2D1_FILL_MODE_WINDING);
            
                pSink->BeginFigure(
                    D2D1::Point2F(270, 255),
                    D2D1_FIGURE_BEGIN_FILLED
                    );
                pSink->AddArc(
                    D2D1::ArcSegment(
                        D2D1::Point2F(440, 255), // end point
                        D2D1::SizeF(85, 85),
                        0.0f, // rotation angle
                        D2D1_SWEEP_DIRECTION_CLOCKWISE,
                        D2D1_ARC_SIZE_SMALL
                        ));            
                pSink->EndFigure(D2D1_FIGURE_END_CLOSED);

                pSink->BeginFigure(
                    D2D1::Point2F(299, 182),
                    D2D1_FIGURE_BEGIN_HOLLOW
                    );
                pSink->AddBezier(
                   D2D1::BezierSegment(
                       D2D1::Point2F(299, 182),
                       D2D1::Point2F(294, 176),
                       D2D1::Point2F(285, 178)
                       ));
                pSink->AddBezier(
                   D2D1::BezierSegment(
                       D2D1::Point2F(276, 179),
                       D2D1::Point2F(272, 173),
                       D2D1::Point2F(272, 173)
                       ));
                pSink->EndFigure(D2D1_FIGURE_END_OPEN);

                pSink->BeginFigure(
                    D2D1::Point2F(354, 156),
                    D2D1_FIGURE_BEGIN_HOLLOW
                    );
                pSink->AddBezier(
                   D2D1::BezierSegment(
                       D2D1::Point2F(354, 156),
                       D2D1::Point2F(358, 149),
                       D2D1::Point2F(354, 142)
                       ));
                pSink->AddBezier(
                   D2D1::BezierSegment(
                       D2D1::Point2F(349, 134),
                       D2D1::Point2F(354, 127),
                       D2D1::Point2F(354, 127)
                       ));
                pSink->EndFigure(D2D1_FIGURE_END_OPEN);

                pSink->BeginFigure(
                    D2D1::Point2F(322,164),
                    D2D1_FIGURE_BEGIN_HOLLOW
                    );
                pSink->AddBezier(
                   D2D1::BezierSegment(
                       D2D1::Point2F(322, 164),
                       D2D1::Point2F(322, 156),
                       D2D1::Point2F(314, 152)
                       ));
                pSink->AddBezier(
                   D2D1::BezierSegment(
                       D2D1::Point2F(306, 149),
                       D2D1::Point2F(305, 141),
                       D2D1::Point2F(305, 141)
                       ));              
                pSink->EndFigure(D2D1_FIGURE_END_OPEN);

                pSink->BeginFigure(
                    D2D1::Point2F(385, 164),
                    D2D1_FIGURE_BEGIN_HOLLOW
                    );
                pSink->AddBezier(
                   D2D1::BezierSegment(
                       D2D1::Point2F(385,164),
                       D2D1::Point2F(392,161),
                       D2D1::Point2F(394,152)
                       ));
                pSink->AddBezier(
                   D2D1::BezierSegment(
                       D2D1::Point2F(395,144),
                       D2D1::Point2F(402,141),
                       D2D1::Point2F(402,142)
                       ));                
                pSink->EndFigure(D2D1_FIGURE_END_OPEN);

                pSink->BeginFigure(
                    D2D1::Point2F(408,182),
                    D2D1_FIGURE_BEGIN_HOLLOW
                    );
                pSink->AddBezier(
                   D2D1::BezierSegment(
                       D2D1::Point2F(408,182),
                       D2D1::Point2F(416,184),
                       D2D1::Point2F(422,178)
                       ));
                pSink->AddBezier(
                   D2D1::BezierSegment(
                       D2D1::Point2F(428,171),
                       D2D1::Point2F(435,173),
                       D2D1::Point2F(435,173)
                       ));
                pSink->EndFigure(D2D1_FIGURE_END_OPEN);
            }
            hr = pSink->Close();

            SafeRelease(&pSink);
       }

Tworzenie geometrii ścieżki dla rzeki

Następnie przykład tworzy kolejną ścieżkę geometryczną dla rzeki, która zawiera krzywe Beziera. Na poniższej ilustracji przedstawiono sposób wyświetlania rzeki.

ilustracja krzywych beziera, które pokazują rzekę

Poniższy kod pokazuje, jak to zrobić.

        hr = m_pD2DFactory->CreatePathGeometry(&m_pRiverGeometry);
    
        if(SUCCEEDED(hr))
        {
            ID2D1GeometrySink *pSink = NULL;

            hr = m_pRiverGeometry->Open(&pSink);
            if (SUCCEEDED(hr))
            {
                pSink->SetFillMode(D2D1_FILL_MODE_WINDING);
                pSink->BeginFigure(
                    D2D1::Point2F(183, 392),
                    D2D1_FIGURE_BEGIN_FILLED
                    );
                pSink->AddBezier(
                   D2D1::BezierSegment(
                       D2D1::Point2F(238, 284),
                       D2D1::Point2F(472, 345),
                       D2D1::Point2F(356, 303)
                       ));
                pSink->AddBezier(
                   D2D1::BezierSegment(
                       D2D1::Point2F(237, 261),
                       D2D1::Point2F(333, 256),
                       D2D1::Point2F(333, 256)
                       ));
                pSink->AddBezier(
                   D2D1::BezierSegment(
                       D2D1::Point2F(335, 257),
                       D2D1::Point2F(241, 261),
                       D2D1::Point2F(411, 306)
                       ));
                pSink->AddBezier(
                   D2D1::BezierSegment(
                       D2D1::Point2F(574, 350),
                       D2D1::Point2F(288, 324),
                       D2D1::Point2F(296, 392)
                       ));
                pSink->EndFigure(D2D1_FIGURE_END_OPEN);
            }

Renderowanie geometrii ścieżki na wyświetlaczu

Poniższy kod pokazuje, jak renderować wypełnione geometrie ścieżek na ekranie. Najpierw rysuje i maluje geometrię słońca, obok lewej geometrii górskiej, a następnie geometrię rzeki, a na koniec prawą geometrię gór.

 m_pRenderTarget->BeginDraw();

 m_pRenderTarget->SetTransform(D2D1::Matrix3x2F::Identity());

 m_pRenderTarget->Clear(D2D1::ColorF(D2D1::ColorF::White));

 D2D1_SIZE_F rtSize = m_pRenderTarget->GetSize();
 m_pRenderTarget->FillRectangle(
     D2D1::RectF(0, 0, rtSize.width, rtSize.height),
     m_pGridPatternBitmapBrush
     );

 m_pRenderTarget->FillGeometry(m_pSunGeometry, m_pRadialGradientBrush);

 m_pSceneBrush->SetColor(D2D1::ColorF(D2D1::ColorF::Black, 1.f));
 m_pRenderTarget->DrawGeometry(m_pSunGeometry, m_pSceneBrush, 1.f);

 m_pSceneBrush->SetColor(D2D1::ColorF(D2D1::ColorF::OliveDrab, 1.f));
 m_pRenderTarget->FillGeometry(m_pLeftMountainGeometry, m_pSceneBrush);

 m_pSceneBrush->SetColor(D2D1::ColorF(D2D1::ColorF::Black, 1.f));
 m_pRenderTarget->DrawGeometry(m_pLeftMountainGeometry, m_pSceneBrush, 1.f);

 m_pSceneBrush->SetColor(D2D1::ColorF(D2D1::ColorF::LightSkyBlue, 1.f));
 m_pRenderTarget->FillGeometry(m_pRiverGeometry, m_pSceneBrush);

 m_pSceneBrush->SetColor(D2D1::ColorF(D2D1::ColorF::Black, 1.f));
 m_pRenderTarget->DrawGeometry(m_pRiverGeometry, m_pSceneBrush, 1.f);

 m_pSceneBrush->SetColor(D2D1::ColorF(D2D1::ColorF::YellowGreen, 1.f));
 m_pRenderTarget->FillGeometry(m_pRightMountainGeometry, m_pSceneBrush);

 m_pSceneBrush->SetColor(D2D1::ColorF(D2D1::ColorF::Black, 1.f));
 m_pRenderTarget->DrawGeometry(m_pRightMountainGeometry, m_pSceneBrush, 1.f);


 hr = m_pRenderTarget->EndDraw();

Pełny przykład przedstawia poniższą ilustrację.

ilustracja rzeki, gór i słońca, korzystając z geometrii ścieżek

Tworzenie prostej aplikacji Direct2D
Geometrie — omówienie

Udostępnij za pośrednictwem

Geometrie ścieżek — omówienie

Warunki wstępne

Geometrie ścieżek w direct2D

Używanie elementu ID2D1GeometrySink do tworzenia geometrii ścieżki

Przykład: tworzenie złożonego rysunku

Stwórz geometrię ścieżki dla lewej góry

Utwórz geometrię ścieżki dla prawej góry

Tworzenie geometrii ścieżki dla słońca

Tworzenie geometrii ścieżki dla rzeki

Renderowanie geometrii ścieżki na wyświetlaczu

Tematy pokrewne

Opinia

Dodatkowe zasoby