Omówienie pędzli

W tym omówieniu opisano sposób tworzenia i używania ID2D1SolidColorBrush, ID2D1LinearGradientBrush, ID2D1RadialGradientBrushi ID2D1BitmapBrush do malowania obszarów z kolorami stałymi, gradientami i mapami bitowymi. Zawiera on następujące sekcje.

Warunki wstępne

W tym omówieniu założono, że znasz strukturę podstawowej aplikacji Direct2D zgodnie z opisem w Tworzenie prostej aplikacji Direct2D.

Typy pędzli

Pędzel "maluje" obszar swoim efektem. Różne szczotki dają różne typy efektów. Direct2D oferuje cztery typy pędzli: ID2D1SolidColorBrush maluje obszar o stałym kolorze, ID2D1LinearGradientBrush z gradientem liniowym, ID2D1RadialGradientBrush z gradientem promieniowym, a ID2D1BitmapBrush z mapą bitową.

Wszystkie szczotki dziedziczą z ID2D1Brush i współdzielą zestaw typowych cech (ustawianie i uzyskiwanie nieprzezroczystości oraz przekształcanie pędzli); są one tworzone przez ID2D1RenderTarget i są zasobami zależnymi od urządzenia: aplikacja powinna utworzyć pędzle po zainicjowaniu obiektu docelowego renderowania, za pomocą którego będą używane szczotki, i ponownie utworzyć pędzle, gdy element docelowy renderowania będzie ponownie tworzony. (Aby uzyskać więcej informacji na temat zasobów, zobacz Resources Overview.)

Na poniższej ilustracji przedstawiono przykłady poszczególnych typów pędzli.

Podstawy kolorów

Zanim malujesz za pomocą ID2D1SolidColorBrush lub pędzla gradientowego, musisz wybrać kolory. W direct2D kolory są reprezentowane przez strukturę D2D1_COLOR_F (która jest faktycznie tylko nową nazwą struktury używanej przez Direct3D, D3DCOLORVALUE).

Przed systemem Windows 8 D2D1_COLOR_F używa kodowania sRGB. Kodowanie sRGB dzieli kolory na cztery składniki: czerwony, zielony, niebieski i alfa. Każdy składnik jest reprezentowany przez wartość zmiennoprzecinkową z normalnym zakresem od 0,0 do 1,0. Wartość 0,0 wskazuje całkowity brak tego koloru, podczas gdy wartość 1.0 wskazuje, że kolor jest w pełni obecny. W przypadku składnika alfa wartość 0.0 reprezentuje w pełni przezroczysty kolor, a wartość 1.0 reprezentuje w pełni nieprzezroczysty kolor.

Począwszy od systemu Windows 8, D2D1_COLOR_F również akceptuje kodowanie scRGB. scRGB jest rozszerzeniem, które pozwala na wartości kolorów powyżej 1.0 i poniżej 0.0.

Aby zdefiniować kolor, możesz użyć struktury D2D1_COLOR_F i zainicjować swoje pola samodzielnie lub użyć D2D1::ColorF klasy, aby ułatwić tworzenie koloru. Klasa ColorF udostępnia kilka konstruktorów do definiowania kolorów. Jeśli wartość alfa nie jest określona w konstruktorach, wartość domyślna to 1.0.

• Użyj konstruktoraColorF(Enum, FLOAT), aby określić wstępnie zdefiniowany kolor i wartość kanału alfa. Wartość kanału alfa waha się od 0,0 do 1,0, gdzie 0,0 reprezentuje w pełni przezroczysty kolor, a 1,0 reprezentuje w pełni nieprzezroczysty kolor. Na poniższej ilustracji przedstawiono kilka wstępnie zdefiniowanych kolorów i ich odpowiedniki szesnastkowe. Aby uzyskać pełną listę wstępnie zdefiniowanych kolorów, zobacz sekcję Stałe kolorów w klasie ColorF.

  

  Poniższy przykład tworzy wstępnie zdefiniowany kolor i używa go do określenia koloru ID2D1SolidColorBrush.

hr = m_pRenderTarget->CreateSolidColorBrush(
    D2D1::ColorF(D2D1::ColorF::Black, 1.0f),
    &m_pBlackBrush
    );

• Użyj konstruktora ColorF(FLOAT, FLOAT, FLOAT, FLOAT), aby określić kolor w sekwencji czerwonej, zielonej, niebieskiej i alfa, gdzie każdy element ma wartość z zakresu od 0,0 do 1,0.

  W poniższym przykładzie określono czerwone, zielone, niebieskie i alfa wartości koloru.

    ID2D1SolidColorBrush *pGridBrush = NULL;
    hr = pCompatibleRenderTarget->CreateSolidColorBrush(
        D2D1::ColorF(D2D1::ColorF(0.93f, 0.94f, 0.96f, 1.0f)),
        &pGridBrush
        );

• Użyj konstruktora ColorF(UINT32, FLOAT) w celu określenia wartości szesnastkowej koloru i wartości alfa, jak pokazano w poniższym przykładzie.

    hr = m_pRenderTarget->CreateSolidColorBrush(
        D2D1::ColorF(D2D1::ColorF(0x9ACD32, 1.0f)),  
        &m_pYellowGreenBrush
        );

Tryby alfa

Niezależnie od trybu alfa elementu docelowego renderowania, za pomocą którego używasz pędzla, D2D1_COLOR_F wartości są zawsze interpretowane jako proste alfa.

Używanie pędzli z kolorami stałymi

Aby utworzyć pędzel jednolitego koloru, wywołaj metodę ID2D1RenderTarget::CreateSolidColorBrush, która zwraca wartość HRESULT i tworzy obiekt ID2D1SolidColorBrush. Na poniższej ilustracji przedstawiono kwadrat, który jest obrysowany czarnym pędzlem i malowany pędzlem w jednolitym kolorze o wartości 0x9ACD32.

Poniższy kod pokazuje, jak utworzyć i użyć czarnego pędzla koloru oraz pędzla z wartością koloru 0x9ACD32, aby wypełnić i narysować ten kwadrat.

    ID2D1SolidColorBrush *m_pBlackBrush;
    ID2D1SolidColorBrush *m_pYellowGreenBrush;

if (SUCCEEDED(hr))
{
    hr = m_pRenderTarget->CreateSolidColorBrush(
        D2D1::ColorF(D2D1::ColorF::Black, 1.0f),
        &m_pBlackBrush
        );
}

// Create a solid color brush with its rgb value 0x9ACD32.
if (SUCCEEDED(hr))
{
    hr = m_pRenderTarget->CreateSolidColorBrush(
        D2D1::ColorF(D2D1::ColorF(0x9ACD32, 1.0f)),  
        &m_pYellowGreenBrush
        );
}

m_pRenderTarget->FillRectangle(&rcBrushRect, m_pYellowGreenBrush);
m_pRenderTarget->DrawRectangle(&rcBrushRect, m_pBlackBrush, 1, NULL);

W przeciwieństwie do innych pędzli tworzenie ID2D1SolidColorBrush jest stosunkowo niedrogą operacją. Możesz utworzyć obiekty ID2D1SolidColorBrush za każdym razem, gdy renderujesz, bez istotnego wpływu na wydajność. Takie podejście nie jest zalecane w przypadku pędzli gradientowych ani map bitowych.

Używanie pędzli gradientu liniowego

ID2D1LinearGradientBrush maluje obszar z gradientem liniowym zdefiniowanym wzdłuż linii, osią gradientu. Kolory gradientu i ich lokalizację wzdłuż osi gradientu należy określić przy użyciu ID2D1GradientStop obiektów. Można również zmodyfikować oś gradientu, która umożliwia tworzenie gradientu poziomego i pionowego oraz odwrócenie kierunku gradientu. Aby utworzyć pędzel gradientu liniowego, wywołaj metodę ID2D1RenderTarget::CreateLinearGradientBrush.

Na poniższej ilustracji przedstawiono kwadrat malowany za pomocą ID2D1LinearGradientBrush, który ma dwa wstępnie zdefiniowane kolory, "Żółty" i "ForestGreen".

Aby utworzyć gradient pokazany na powyższej ilustracji, wykonaj następujące kroki:

1. Zadeklaruj dwa obiekty D2D1_GRADIENT_STOP. Każdy przystanek gradientu określa kolor i położenie. Pozycja 0,0 wskazuje początek gradientu, a pozycja 1,0 wskazuje koniec gradientu.

   Poniższy kod tworzy tablicę dwóch obiektów D2D1_GRADIENT_STOP. Pierwszy przystanek określa kolor "Żółty" na pozycji 0, a drugi przystanek określa kolor "ForestGreen" na pozycji 1.

    // Create an array of gradient stops to put in the gradient stop
    // collection that will be used in the gradient brush.
    ID2D1GradientStopCollection *pGradientStops = NULL;

    D2D1_GRADIENT_STOP gradientStops[2];
    gradientStops[0].color = D2D1::ColorF(D2D1::ColorF::Yellow, 1);
    gradientStops[0].position = 0.0f;
    gradientStops[1].color = D2D1::ColorF(D2D1::ColorF::ForestGreen, 1);
    gradientStops[1].position = 1.0f;

2. Utwórz ID2D1GradientStopCollection. Poniższy przykład wywołuje CreateGradientStopCollection, przekazując tablicę obiektów D2D1_GRADIENT_STOP, liczbę punktów zatrzymania gradientu (2), D2D1_GAMMA_2_2 do interpolacji i D2D1_EXTEND_MODE_CLAMP dla trybu rozszerzania.

    // Create the ID2D1GradientStopCollection from a previously
    // declared array of D2D1_GRADIENT_STOP structs.
    hr = m_pRenderTarget->CreateGradientStopCollection(
        gradientStops,
        2,
        D2D1_GAMMA_2_2,
        D2D1_EXTEND_MODE_CLAMP,
        &pGradientStops
        );

3. Utwórz ID2D1LinearGradientBrush. W następnym przykładzie wywoływana jest metoda CreateLinearGradientBrush i przekazuje do niej właściwości pędzla gradientu liniowego, które zawierają punkt początkowy (0, 0) i punkt końcowy (150, 150), oraz punkty zatrzymania gradientu utworzone w poprzednim kroku.

    // The line that determines the direction of the gradient starts at
    // the upper-left corner of the square and ends at the lower-right corner.

    if (SUCCEEDED(hr))
    {
        hr = m_pRenderTarget->CreateLinearGradientBrush(
            D2D1::LinearGradientBrushProperties(
                D2D1::Point2F(0, 0),
                D2D1::Point2F(150, 150)),
            pGradientStops,
            &m_pLinearGradientBrush
            );
    }

4. Użyj ID2D1LinearGradientBrush. W następnym przykładzie kodu użyto pędzla do wypełnienia prostokąta.

    m_pRenderTarget->FillRectangle(&rcBrushRect, m_pLinearGradientBrush);

Więcej informacji o zatrzymaniu gradientu

D2D1_GRADIENT_STOP jest podstawowym blokiem konstrukcyjnym pędzla gradientowego. Stop gradientu określa kolor i położenie wzdłuż osi gradientu. Wartość pozycji gradientu waha się od 0,0 do 1,0. Im bliżej jest 0,0, tym bliżej koloru jest początek gradientu; im bliżej jest 1,0, tym bliżej koloru jest na końcu gradientu.

Na poniższej ilustracji przedstawiono punkty zatrzymania gradientu. Okrąg oznacza położenie punktów zatrzymania gradientu, a linia przerywana pokazuje oś gradientu.

Pierwszy przystanek gradientu określa kolor żółty na pozycji 0,0. Drugi przystanek gradientu określa czerwony kolor na pozycji 0,25. Od lewej do prawej wzdłuż osi gradientu kolory między tymi dwoma przystankami stopniowo zmieniają się z żółtego na czerwony. Trzeci przystanek gradientu określa kolor niebieski na pozycji 0,75. Kolory między drugim a trzecim punktem zatrzymania gradientu stopniowo zmieniają się z czerwonego na niebieski. Czwarty przebieg gradientu określa kolor limonkowy na pozycji 1,0. Kolory między trzecim a czwartym stopniem gradientu stopniowo zmieniają się z niebieskiego na limonkowy.

Oś gradientu

Jak wspomniano wcześniej, stopnie gradientu w pędzlu gradientu liniowego są rozmieszczone wzdłuż linii, czyli osi gradientu. Możesz określić orientację i rozmiar linii, używając pól startPoint i endPoint struktury D2D1_LINEAR_GRADIENT_BRUSH_PROPERTIES podczas tworzenia pędzla gradientu liniowego. Po utworzeniu pędzla można dostosować oś gradientu, wywołując metody SetStartPoint i SetEndPoint. Manipulując punktem początkowym i końcowym pędzla, można utworzyć gradienty poziome i pionowe, odwrócić kierunek gradientu i nie tylko.

Na przykład na poniższej ilustracji punkt początkowy ma wartość (0,0) i punkt końcowy (150, 50); Spowoduje to utworzenie gradientu ukośnego, który rozpoczyna się w lewym górnym rogu i rozciąga się na prawy dolny róg malowanego obszaru. Po ustawieniu punktu początkowego na (0, 25) i punktu końcowego na (150, 25) zostanie utworzony gradient poziomy. Podobnie ustawienie punktu początkowego na (75, 0) i punktu końcowego na (75, 50) powoduje utworzenie gradientu pionowego. Ustawienie punktu początkowego na (0, 50) i punktu końcowego na (150, 0) tworzy gradient ukośny, który rozpoczyna się w lewym dolnym rogu i rozciąga się na prawy górny róg malowanego obszaru.

Korzystanie z pędzli gradientowych promieniowych

W przeciwieństwie do ID2D1LinearGradientBrush, która łączy dwa lub więcej kolorów wzdłuż osi gradientu, ID2D1RadialGradientBrush maluje obszar gradientem promieniowym, przechodzącym przez elipsę i łączącym dwa lub więcej kolorów. Podczas gdy ID2D1LinearGradientBrush definiuje oś gradientu z punktem początkowym i punktem końcowym, ID2D1RadialGradientBrush definiuje elipsę gradientu, określając środek, poziome i pionowe promienie oraz przesunięcie pochodzenia gradientu.

Podobnie jak ID2D1LinearGradientBrush, ID2D1RadialGradientBrush używa ID2D1GradientStopCollection do określenia kolorów i pozycji w gradientzie.

Na poniższej ilustracji przedstawiono okrąg malowany za pomocą ID2D1RadialGradientBrush. Okrąg ma dwa przystanki gradientu: pierwszy określa wstępnie zdefiniowany kolor "Żółty" na pozycji 0,0, a drugi określa wstępnie zdefiniowany kolor "ForestGreen" na pozycji 1.0. Gradient ma środek w punkcie (75, 75), przesunięcie punktu wyjścia gradientu wynoszące (0, 0), oraz promienie x i y równe 75.

W poniższych przykładach kodu pokazano, jak malować ten okrąg za pomocą ID2D1RadialGradientBrush, który ma dwa przystanki koloru: "Żółty" na pozycji 0,0 i "ForestGreen" na pozycji 1.0. Podobnie jak w przypadku tworzenia ID2D1LinearGradientBrush, przykład wywołuje CreateGradientStopCollection, aby utworzyć ID2D1GradientStopCollection z tablicy zatrzymań gradientu.

// Create an array of gradient stops to put in the gradient stop
// collection that will be used in the gradient brush.
ID2D1GradientStopCollection *pGradientStops = NULL;

D2D1_GRADIENT_STOP gradientStops[2];
gradientStops[0].color = D2D1::ColorF(D2D1::ColorF::Yellow, 1);
gradientStops[0].position = 0.0f;
gradientStops[1].color = D2D1::ColorF(D2D1::ColorF::ForestGreen, 1);
gradientStops[1].position = 1.0f;
// Create the ID2D1GradientStopCollection from a previously
// declared array of D2D1_GRADIENT_STOP structs.
hr = m_pRenderTarget->CreateGradientStopCollection(
    gradientStops,
    2,
    D2D1_GAMMA_2_2,
    D2D1_EXTEND_MODE_CLAMP,
    &pGradientStops
    );

Aby utworzyć ID2D1RadialGradientBrush, użyj metody ID2D1RenderTarget::CreateRadialGradientBrush. CreateRadialGradientBrush przyjmuje trzy parametry. Pierwszy parametr, D2D1_RADIAL_GRADIENT_BRUSH_PROPERTIES określa środek, przesunięcie pochodzenia gradientu oraz poziome i pionowe promienie gradientu. Drugi parametr to ID2D1GradientStopCollection, opisujący kolory oraz ich położenie w gradientzie, a trzeci parametr to adres wskaźnika, który odbiera nową referencję ID2D1RadialGradientBrush. Niektóre przeciążenia przyjmują dodatkowy parametr, strukturę D2D1_BRUSH_PROPERTIES, która określa wartość nieprzezroczystości i transformację stosowaną do nowego pędzla.

Następny przykład wywołuje CreateRadialGradientBrush, przekazując tablicę elementów zatrzymania gradientu oraz właściwości pędzla gradientu promieniowego, które mają wartość środka ustawioną na (75, 75), gradientOriginOffset ustawioną na (0, 0) oraz promieńX i promieńY ustawione na 75.

// The center of the gradient is in the center of the box.
// The gradient origin offset was set to zero(0, 0) or center in this case.
if (SUCCEEDED(hr))
{
    hr = m_pRenderTarget->CreateRadialGradientBrush(
        D2D1::RadialGradientBrushProperties(
            D2D1::Point2F(75, 75),
            D2D1::Point2F(0, 0),
            75,
            75),
        pGradientStops,
        &m_pRadialGradientBrush
        );
}

Do wypełnienia elipsy użyto pędzla w ostatnim przykładzie.

m_pRenderTarget->FillEllipse(ellipse, m_pRadialGradientBrush);
m_pRenderTarget->DrawEllipse(ellipse, m_pBlackBrush, 1, NULL);

Konfigurowanie gradientu promieniowego

Różne wartości dla środka, gradientOriginOffset, promieńX i/lub promieńY generują różne gradienty. Na poniższej ilustracji przedstawiono kilka gradientów promieniowych, które mają różne przesunięcia początku gradientu, sprawiając wrażenie oświetlenia okręgów z różnych kątów.

Korzystanie z pędzli map bitowych

ID2D1BitmapBrush maluje obszar mapą bitową (reprezentowaną przez obiekt ID2D1Bitmap).

Na poniższej ilustracji przedstawiono kwadrat malowany mapą bitową rośliny.

W poniższych przykładach pokazano, jak malować ten kwadrat za pomocą ID2D1BitmapBrush.

Pierwszy przykład inicjuje ID2D1Bitmap do użycia z pędzlem. ID2D1Bitmap jest dostarczana przez metodę pomocnika LoadResourceBitmap zdefiniowaną gdzie indziej w przykładzie.

// Create the bitmap to be used by the bitmap brush.
if (SUCCEEDED(hr))
{
    hr = LoadResourceBitmap(
        m_pRenderTarget,
        m_pWICFactory,
        L"FERN",
        L"Image",
        &m_pBitmap
        );
}

Aby utworzyć pędzel mapy bitowej, wywołaj metodę ID2D1RenderTarget::CreateBitmapBrush i określ ID2D1Bitmap do malowania. Metoda zwraca obiekt HRESULT i obiekt ID2D1BitmapBrush. Niektóre przeciążenia CreateBitmapBrush umożliwiają określenie dodatkowych opcji poprzez akceptowanie struktur D2D1_BRUSH_PROPERTIES i D2D1_BITMAP_BRUSH_PROPERTIES.

if (SUCCEEDED(hr))
{
    hr = m_pRenderTarget->CreateBitmapBrush(
        m_pBitmap,
        &m_pBitmapBrush
        );
}

W następnym przykładzie użyto pędzla do wypełnienia prostokąta.

m_pRenderTarget->FillRectangle(&rcBrushRect, m_pBitmapBrush);

Konfigurowanie trybów rozszerzania

Czasami gradient pędzla gradientowego lub bitmapa dla pędzla bitmapowego nie wypełnia całkowicie obszaru, który jest malowany.

• W przypadku ID2D1BitmapBrush, Direct2D używa poziomych (SetExtendModeX) oraz pionowych (SetExtendModeY) ustawień trybu rozszerzania, aby określić sposób wypełnienia pozostałego obszaru.

• W przypadku pędzla gradientowego funkcja Direct2D określa sposób wypełnienia pozostałego obszaru przy użyciu wartości parametru D2D1_EXTEND_MODE określonego podczas wywoływania CreateGradientStopCollection w celu utworzenia ID2D1GradientStopCollection.

Poniższa ilustracja przedstawia wyniki z każdej możliwej kombinacji trybów rozszerzania dla ID2D1BitmapBrush: D2D1_EXTEND_MODE_CLAMP (CLAMP), D2D1_EXTEND_MODE_WRAP (WRAP) i D2D1_EXTEND_MIRROR (MIRROR).

W poniższym przykładzie pokazano, jak ustawić tryby rozciągania w kierunku x i y pędzla bitmapy na D2D1_EXTEND_MIRROR. Następnie maluje prostokąt za pomocą ID2D1BitmapBrush.

m_pBitmapBrush->SetExtendModeX(D2D1_EXTEND_MODE_MIRROR);
m_pBitmapBrush->SetExtendModeY(D2D1_EXTEND_MODE_MIRROR);

m_pRenderTarget->FillRectangle(exampleRectangle, m_pBitmapBrush);

Generuje dane wyjściowe, jak pokazano na poniższej ilustracji.

Przekształcanie pędzli

Podczas malowania za pomocą pędzla, maluje się w przestrzeni współrzędnych celu renderowania. Pędzle nie umieszczają się automatycznie, aby dopasować się do obiektu malowanego; domyślnie zaczynają malować w punkcie początkowym (0, 0) docelowego obszaru renderowania.

Gradient zdefiniowany przez ID2D1LinearGradientBrush można "przenieść" do obszaru docelowego, ustawiając punkt początkowy i punkt końcowy. Podobnie można przenieść gradient zdefiniowany przez ID2D1RadialGradientBrush, zmieniając jego środek i promienie.

Aby wyrównać zawartość ID2D1BitmapBrush do malowanego obszaru, możesz użyć metody SetTransform, aby przetłumaczyć mapę bitową do żądanej lokalizacji. Ta transformacja wpływa tylko na pędzel; nie ma wpływu na żadną inną treść narysowaną przez docelowy obiekt renderowania.

Na następnych ilustracjach pokazano efekt użycia ID2D1BitmapBrush do wypełnienia prostokąta znajdującego się na (100, 100). Ilustracja na lewej ilustracji przedstawia wynik wypełnienia prostokąta bez przekształcania pędzla: mapa bitowa jest rysowana na początku obiektu docelowego renderowania. W rezultacie w prostokącie pojawia się tylko część bitmapy. Ilustracja po prawej stronie przedstawia wynik przekształcenia ID2D1BitmapBrush tak, aby jego zawartość została przesunięta o 50 pikseli po prawej stronie i 50 pikseli w dół. Mapa bitowa wypełnia teraz prostokąt.

Poniższy kod pokazuje, jak to zrobić. Najpierw zastosuj transformację do ID2D1BitmapBrush, przenosząc pędzel 50 pikseli w prawo wzdłuż osi x i 50 pikseli w dół wzdłuż osi y. Następnie użyj ID2D1BitmapBrush, aby wypełnić prostokąt, który ma lewy górny róg (100, 100) i prawy dolny róg (200, 200).

// Create the bitmap to be used by the bitmap brush.
if (SUCCEEDED(hr))
{
    hr = LoadResourceBitmap(
        m_pRenderTarget,
        m_pWICFactory,
        L"FERN",
        L"Image",
        &m_pBitmap
        );
   
}

if (SUCCEEDED(hr))
{
    hr = m_pRenderTarget->CreateBitmapBrush(
        m_pBitmap,
        &m_pBitmapBrush
        );
}

D2D1_RECT_F rcTransformedBrushRect = D2D1::RectF(100, 100, 200, 200);

// Demonstrate the effect of transforming a bitmap brush.
m_pBitmapBrush->SetTransform(
     D2D1::Matrix3x2F::Translation(D2D1::SizeF(50,50))
     );

// To see the content of the rcTransformedBrushRect, comment
// out this statement.
m_pRenderTarget->FillRectangle(
     &rcTransformedBrushRect, 
     m_pBitmapBrush
     );

m_pRenderTarget->DrawRectangle(rcTransformedBrushRect, m_pBlackBrush, 1, NULL);

Tematy pokrewne

• Odwołania Direct2D
• Jak utworzyć szczotkę o stałym kolorze
• Jak utworzyć liniowy gradient pędzla
• Jak utworzyć pędzel gradientowy radialny
• Jak utworzyć pędzel bitmapowy