Delen via


Effecten

Wat zijn Direct2D-effecten?

U kunt Direct2D gebruiken om een of meer effecten van hoge kwaliteit toe te passen op een afbeelding of een set afbeeldingen. De effecten-API's zijn gebouwd op Direct3D 11 en profiteren van GPU-functies voor afbeeldingsverwerking. U kunt effecten in een effectgrafiek koppelen en de uitvoer van effecten samenstellen of combineren.

Een Direct2D-effect voert een afbeeldingstaak uit, zoals het wijzigen van de helderheid, het desatureren van een afbeelding of het maken van een slagschaduw. Effecten kunnen nul of meer invoerafbeeldingen accepteren, meerdere eigenschappen weergeven die hun bewerking beheren en één uitvoerafbeelding genereren.

Elk effect maakt een interne transformatiegrafiek die bestaat uit afzonderlijke transformaties. Elke transformatie vertegenwoordigt één afbeeldingsbewerking. Het belangrijkste doel van een transformatie is het huis van de shaders die voor elke uitvoer pixel worden uitgevoerd. Deze shaders kunnen pixel-shaders, hoekpunt-shaders, de mixfase van een GPU en compute-shaders zijn.

Zowel de Direct2Dingebouwde effecten als aangepaste effecten die u kunt maken met behulp van de API voor aangepaste effecten op deze manier werken.

Er zijn verschillende ingebouwde effecten van categorieën zoals die hier. Zie de sectie Ingebouwde effecten voor een volledige lijst.

U kunt effecten toepassen op elke bitmap, waaronder: afbeeldingen die zijn geladen door de Windows Imaging Component (WIC), primitieven die zijn getekend door Direct2D-, tekst uit DirectWrite-of scènes die worden weergegeven door Direct3D-.

Met Direct2D-effecten kunt u uw eigen effecten schrijven die u voor uw toepassingen kunt gebruiken. Met een aangepast effectframework kunt u GPU-functies zoals pixel-shaders, hoekpunt-shaders en de blending-eenheid gebruiken. U kunt ook andere ingebouwde of aangepaste effecten opnemen in uw aangepaste effect. Het framework voor het bouwen van aangepaste effecten is hetzelfde dat is gebruikt om de ingebouwde effecten van Direct2D-te maken. De Direct2D-effect author-API biedt een set interfaces voor het maken en registreren van effecten.

Meer effectenonderwerpen

In de rest van dit onderwerp worden de basisprincipes van Direct2D-effecten uitgelegd, zoals het toepassen van een effect op een afbeelding. De tabel hier bevat koppelingen naar aanvullende onderwerpen over effecten.

Onderwerp Beschrijving

Direct2D maakt gebruik van een optimalisatie genaamd effect-shader-koppeling waarmee meerdere effectgrafiekweergaven worden gecombineerd tot één pas.
aangepaste effecten
Laat zien hoe u uw eigen aangepaste effecten schrijft met behulp van standaard HLSL.
Een afbeelding laden in Direct2D-effecten met behulp van de FilePicker-
Laat zien hoe u de Windows::Storage::P ickers::FileOpenPicker kunt gebruiken om een afbeelding in Direct2D-effecten te laden.
Direct2D-inhoud opslaan in een afbeeldingsbestand
In dit onderwerp wordt beschreven hoe u IWICImageEncoder- gebruikt om inhoud op te slaan in de vorm van een ID2D1Image- naar een gecodeerd afbeeldingsbestand zoals JPEG.
Effecten toepassen op primitieven
In dit onderwerp wordt beschreven hoe u een reeks effecten toepast op Direct2D- en DirectWrite primitieven.
Precisie- en numerieke knipsels beheren in effectgrafieken
Toepassingen die effecten weergeven met Direct2D, moeten ervoor zorgen dat het gewenste kwaliteitsniveau en voorspelbaarheid met betrekking tot numerieke precisie worden bereikt.

Een effect toepassen op een afbeelding

U kunt de Direct2D-effecten-API gebruiken om transformaties toe te passen op afbeeldingen.

Notitie

In dit voorbeeld wordt ervan uitgegaan dat u al ID2D1DeviceContext en IWICBitmapSource objecten hebt gemaakt. Zie How to load an image into Direct2D effects using the FilePicker and Devices and Device Contextsvoor meer informatie over het maken van deze objecten.

  1. Declareer een ID2D1Effect variabele en maak vervolgens een bitmapbron effect met behulp van de methode ID2DDeviceContext::CreateEffect.

        ComPtr<ID2D1Effect> bitmapSourceEffect;
    
        DX::ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D1BitmapSource, &bitmapSourceEffect));
    
  2. Stel de eigenschap BitmapSource in op de WIC-bitmapbron met behulp van de ID2D1Effect::SetValue.

            DX::ThrowIfFailed(m_bitmapSourceEffect->SetValue(D2D1_BITMAPSOURCE_PROP_WIC_BITMAP_SOURCE, m_wicBitmapSource.Get()));
    
  3. Declareer een ID2D1Effect variabele en maak vervolgens het gaussiische effect.

        ComPtr<ID2D1Effect> gaussianBlurEffect;
    
        DX::ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D1GaussianBlur, &gaussianBlurEffect));
    
  4. Stel de invoer in om de afbeelding te ontvangen van het bitmapbroneffect. Stel de vervagingswaarde in voor de methode SetValue en de standaarddeviatie-eigenschap.

        gaussianBlurEffect->SetInputEffect(0, bitmapSourceEffect.Get());
    
        DX::ThrowIfFailed(gaussianBlurEffect->SetValue(D2D1_GAUSSIANBLUR_PROP_STANDARD_DEVIATION, 6.0f));
    
  5. Gebruik de apparaatcontext om de resulterende afbeeldingsuitvoer te tekenen.

        m_d2dContext->BeginDraw();
    
        m_d2dContext->Clear(D2D1::ColorF(D2D1::ColorF::CornflowerBlue));
    
        // Draw the blurred image.
        m_d2dContext->DrawImage(gaussianBlurEffect.Get());
    
        HRESULT hr = m_d2dContext->EndDraw();
    

    De methode DrawImage moet worden aangeroepen tussen de ID2DDeviceContext::BeginDraw en EndDraw-aanroepen zoals andere Direct2D-renderbewerkingen. DrawImage een afbeelding of uitvoer van een effect kan maken en deze weer te geven op het doeloppervlak.

Ruimtelijke transformaties

Direct2D biedt ingebouwde effecten waarmee afbeeldingen in 2D- en 3D-ruimte kunnen worden getransformeerd, evenals schalen. De schaal- en transformatieeffecten bieden verschillende kwaliteitsniveaus zoals: dichtstbijzijnde buur, lineair, kubieke, multi-sample lineaire, anisotropische en hoogwaardige kubieke.

Notitie

De anisotropische modus genereert mipmaps bij het schalen, maar als u de eigenschap in cache instelt op true op de effecten die invoer zijn voor de transformatie, worden de mipmaps niet telkens gegenereerd voor voldoende kleine afbeeldingen.

ComPtr<ID2D1Effect> affineTransformEffect;
DX::ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D12DAffineTransform, &affineTransformEffect));

affineTransformEffect->SetInput(0, bitmap.Get());

D2D1_MATRIX_3X2_F matrix = D2D1::Matrix3x2F(0.9f, -0.1f,  0.1f, 0.9f, 8.0f, 45.0f);
DX::ThrowIfFailed(affineTransformEffect->SetValue(D2D1_2DAFFINETRANSFORM_PROP_TRANSFORM_MATRIX, matrix));

m_d2dContext->BeginDraw();
m_d2dContext->DrawImage(affineTransformEffect.Get());
m_d2dContext->EndDraw();

Dit gebruik van het 2D affine transformatie-effect draait de bitmap iets linksom.

Voor
2d affine-effect vóór afbeelding.
Na
2d affine effect na afbeelding.

Compositing-afbeeldingen

Sommige effecten accepteren meerdere invoerwaarden en vormen deze samen in één resulterende afbeelding.

De ingebouwde samengestelde en rekenkundige samengestelde effecten bieden verschillende modi. Zie het onderwerp samengestelde voor meer informatie. Het blend effect heeft een verscheidenheid aan gpu versnelde modi beschikbaar.

ComPtr<ID2D1Effect> compositeEffect;
DX::ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D1Composite, &compositeEffect));

compositeEffect->SetInput(0, bitmap.Get());
compositeEffect->SetInput(1, bitmapTwo.Get());

m_d2dContext->BeginDraw();
m_d2dContext->DrawImage(compositeEffect.Get());
m_d2dContext->EndDraw();

Het samengestelde effect combineert afbeeldingen op verschillende manieren op basis van de modus die u opgeeft.

Pixelaanpassingen

Er zijn enkele ingebouwde Direct2D-effecten waarmee u de pixelgegevens kunt wijzigen. Het kleurmatrixeffect kan bijvoorbeeld worden gebruikt om de kleur van een afbeelding te wijzigen.

ComPtr<ID2D1Effect> colorMatrixEffect;
DX::ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D1ColorMatrix, &colorMatrixEffect));

colorMatrixEffect->SetInput(0, bitmap.Get());

D2D1_MATRIX_5X4_F matrix = D2D1::Matrix5x4F(0, 0, 1, 0,   0, 1, 0, 0,   1, 0, 0, 0,   0, 0, 0, 1,   0, 0, 0, 0);
DX::ThrowIfFailed(colorMatrixEffect->SetValue(D2D1_COLORMATRIX_PROP_COLOR_MATRIX, matrix));

m_d2dContext->BeginDraw();
m_d2dContext->DrawImage(colorMatrixEffect.Get());
m_d2dContext->EndDraw();

Met deze code wordt de afbeelding gemaakt en wordt de kleur gewijzigd, zoals hier wordt weergegeven in de voorbeeldafbeeldingen.

Voor
kleurmatrixeffect vóór de afbeelding.
Na
kleurmatrixeffect na afbeelding.

Zie de ingebouwde effecten sectie voor meer informatie.

Bouweffectgrafieken

U kunt effecten aan elkaar koppelen om afbeeldingen te transformeren. Met de code hier wordt bijvoorbeeld een schaduw en een 2D-transformatie toegepast en worden de resultaten vervolgens samengevoegd.

ComPtr<ID2D1Effect> shadowEffect;
ComPtr<ID2D1Effect> affineTransformEffect;
ComPtr<ID2D1Effect> compositeEffect;

DX::ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D1Shadow, &shadowEffect));
DX::ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D12DAffineTransform, &affineTransformEffect));
DX::ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D1Composite, &compositeEffect));

shadowEffect->SetInput(0, bitmap.Get());
affineTransformEffect->SetInputEffect(0, shadowEffect.Get());

D2D1_MATRIX_3X2_F matrix = D2D1::Matrix3x2F::Translation(20, 20));

affineTransformEffect->SetValue(D2D1_2DAFFINETRANSFORM_PROP_TRANSFORM_MATRIX, matrix);

compositeEffect->SetInputEffect(0, affineTransformEffect.Get());
compositeEffect->SetInput(1, bitmap.Get());

m_d2dContext->BeginDraw();
m_d2dContext->DrawImage(compositeEffect.Get());
m_d2dContext->EndDraw();

Dit is het resultaat.

uitvoer van schaduweffect.

Effecten nemen ID2D1Image objecten als invoer. U kunt een ID2D1Bitmap gebruiken omdat de interface is afgeleid van ID2D1Image-. U kunt ook de ID2D1Effect::GetOutput- gebruiken om de uitvoer van een ID2D1Effect-object op te halen als een ID2D1Image- of de methode SetInputEffect te gebruiken, waarmee de uitvoer voor u wordt geconverteerd. In de meeste gevallen bestaat een effectgrafiek uit ID2D1Effect objecten die rechtstreeks aan elkaar zijn gekoppeld, waardoor u eenvoudig meerdere effecten kunt toepassen op een afbeelding om aantrekkelijke visuals te maken.

Zie Effecten toepassen op primitieven voor meer informatie.

voorbeeld van Direct2D-basisafbeeldingseffecten

ingebouwde effecten