Come applicare effetti alle primitive

Questo argomento illustra come applicare una serie di effetti alle primitive Direct2D e DirectWrite.

È possibile usare l'API effetti Direct2D per applicare grafici effetto alle primitive sottoposte a rendering da Direct2D a un'immagine. L'esempio seguente include due rettangoli arrotondati e il testo "Direct2D". Usare Direct2D per disegnare i rettangoli e DirectWrite per disegnare il testo.

Usando gli effetti Direct2D, è possibile rendere l'immagine simile all'immagine successiva. Applicare gli effetti Gaussian Blur, Point Specular Lighting, Arithmetic Composite e Composite alle primitive 2D per creare l'immagine qui.

Dopo aver eseguito il rendering dei rettangoli e del testo in una superficie intermedia, è possibile usarlo come input per gli oggetti ID2D1Effect nel grafico dell'immagine.

In questo esempio impostare l'immagine originale come input sull'effetto Blur gaussian e quindi impostare l'output del blur come input per l'effetto Illuminazione speculare punto. Il risultato di questo effetto viene quindi composito con l'immagine originale due volte per ottenere l'immagine finale di cui viene eseguito il rendering nella finestra.

Ecco un diagramma del grafico dell'immagine.

Questo grafico degli effetti è costituito da quattro oggetti ID2D1Effect , ognuno che rappresenta un effetto predefinito diverso. È possibile creare e connettere effetti personalizzati nello stesso modo, dopo averli registrati usando ID1D1Factory1::RegisterEffect. Il codice seguente crea gli effetti, imposta le proprietà e connette il grafico degli effetti mostrato in precedenza.

1. Creare l'effetto blur gaussian usando il metodo ID2D1DeviceContext::CreateEffect e specificando il CLSID appropriato. I CLSID per gli effetti predefiniti sono definiti in d2d1effects.h. Si imposta quindi la deviazione standard del blur usando il metodo ID2D1Effect::SetValue .

   // Create the Gaussian Blur Effect
   DX::ThrowIfFailed(
       m_d2dContext->CreateEffect(CLSID_D2D1GaussianBlur, &gaussianBlurEffect)
       );
   
   // Set the blur amount
   DX::ThrowIfFailed(
       gaussianBlurEffect->SetValue(D2D1_GAUSSIANBLUR_PROP_STANDARD_DEVIATION, sc_gaussianBlurStDev)
       );
   

   L'effetto blur di Gaussian fa blur tutti i canali dell'immagine, incluso il canale alfa.

2. Creare l'effetto di illuminazione speculare e impostare le proprietà. La posizione della luce è un vettore di 3 valori a virgola mobile, quindi è necessario dichiararla come variabile separata e passarla al metodo SetValue .

   // Create the Specular Lighting Effect
   DX::ThrowIfFailed(
       m_d2dContext->CreateEffect(CLSID_D2D1PointSpecular, &specularLightingEffect)
       );
   
   DX::ThrowIfFailed(
       specularLightingEffect->SetValue(D2D1_POINTSPECULAR_PROP_LIGHT_POSITION, sc_specularLightPosition)
       );
   
   DX::ThrowIfFailed(
       specularLightingEffect->SetValue(D2D1_POINTSPECULAR_PROP_SPECULAR_EXPONENT, sc_specularExponent)
       );
   
   DX::ThrowIfFailed(
       specularLightingEffect->SetValue(D2D1_POINTSPECULAR_PROP_SURFACE_SCALE, sc_specularSurfaceScale)
       );
   
   DX::ThrowIfFailed(
       specularLightingEffect->SetValue(D2D1_POINTSPECULAR_PROP_SPECULAR_CONSTANT, sc_specularConstant)
       );
   

   L'effetto di illuminazione speculare usa il canale alfa dell'input per creare una mappa di altezza per l'illuminazione.

3. Esistono due diversi effetti compositi che è possibile usare l'effetto composito e il composito aritmetico. Questo grafico degli effetti usa entrambi.

   Creare l'effetto composito e impostare la modalità su D2D1_COMPOSITE_MODE_SOURCE_IN, che restituisce l'intersezione delle immagini di origine e di destinazione.

   L'effetto composito aritmetico compone le due immagini di input basate su una formula definita dal World Wide Web Consortium (W3C) per lo standard Scalable Vector Graphics (SVG). Creare un composito aritmetico e impostare i coefficienti per la formula.

   // Create the Composite Effects
   DX::ThrowIfFailed(
       m_d2dContext->CreateEffect(CLSID_D2D1Composite, &compositeEffect)
       );
   
   DX::ThrowIfFailed(
       compositeEffect->SetValue(D2D1_COMPOSITE_PROP_MODE, D2D1_COMPOSITE_MODE_SOURCE_IN)
       );
   
   DX::ThrowIfFailed(
       m_d2dContext->CreateEffect(CLSID_D2D1ArithmeticComposite, &m_arithmeticCompositeEffect)
       );
   
   DX::ThrowIfFailed(
       m_arithmeticCompositeEffect->SetValue(D2D1_ARITHMETICCOMPOSITE_PROP_COEFFICIENTS, sc_arithmeticCoefficients)
       );
   

   I coefficienti per l'effetto composito aritmetico sono visualizzati qui.

   D2D1_VECTOR_4F sc_arithmeticCoefficients   = D2D1::Vector4F(0.0f, 1.0f, 1.0f, 0.0f);
   

   In questo grafico degli effetti, entrambi gli effetti compositi accettano l'output degli altri effetti e la superficie intermedia come input e compositi.

4. Infine, si connettono gli effetti per formare il grafico impostando gli input sulle immagini e le bitmap appropriate.

   Il primo effetto, blur gaussian, riceve l'input dalla superficie intermedia a cui è stato eseguito il rendering delle primitive. L'input viene impostato usando il metodo ID2D1Effect::SetInput e specificando l'indice di un oggetto ID2D1Image . Gli effetti di illuminazione gaussian e speculari hanno solo un singolo input. L'effetto di illuminazione speculare usa il canale alfa sfocato del blur gaussian

   Gli effetti compositi e aritmetici hanno più input. Per assicurarsi che le immagini siano inserite nell'ordine corretto, è necessario specificare l'indice corretto per ogni immagine di input.

   // Connect the graph.
   // Apply a blur effect to the original image.
   gaussianBlurEffect->SetInput(0, m_inputImage.Get());
   
   // Apply a specular lighting effect to the result.
   specularLightingEffect->SetInputEffect(0, gaussianBlurEffect.Get());
   
   // Compose the original bitmap under the output from lighting and blur.
   compositeEffect->SetInput(0, m_inputImage.Get());
   compositeEffect->SetInputEffect(1, specularLightingEffect.Get());
   
   // Compose the original bitmap under the output from lighting and blur.
   m_arithmeticCompositeEffect->SetInput(0, m_inputImage.Get());
   m_arithmeticCompositeEffect->SetInputEffect(1, compositeEffect.Get());
   

5. Passare l'oggetto effetto composito aritmetico al metodo ID2DDeviceContext::D rawImage e elabora e disegna l'output del grafico.

       // Draw the output of the effects graph.
       m_d2dContext->DrawImage(
           m_arithmeticCompositeEffect.Get(),
           D2D1::Point2F(
               (size.width - sc_inputBitmapSize.width) / 2,
               (size.height - sc_inputBitmapSize.height) / 2 + sc_offset
               )
           );