Negli script precedenti abbiamo visto come grazie alle Composition API sia facile creare delle animazioni ad alte performance con pochissime righe di codice.
Questa settimana andremo a vedere come sia altrettanto semplice applicare effetti "speciali" alle immagini.
Consideriamo il seguente snippet di codice associato all'evento Loaded della nostra MainPage. Il codice sottostante fa riferimento ad un controllo Canvas al centro della nostra UI di nome CanvasDraw:
private void MainPageLoaded(object sender, RoutedEventArgs e) { ContainerVisual _leftRoot = CanvasDraw.GetVisual(); var _compositor = _leftRoot.Compositor; var _imageFactory = CompositionImageFactory.CreateCompositionImageFactory(_compositor); var sepiaVisual = _compositor.CreateSpriteVisual(); sepiaVisual.Size = new Vector2(208, 208); _leftRoot.Children.InsertAtTop(sepiaVisual); CompositionSurfaceBrush surfaceBrush = _compositor.CreateSurfaceBrush(); surfaceBrush.Surface = _imageFactory.CreateImageFromUri(new Uri("ms-appx:///Assets/Pics/mvp.png")).Surface; var graphicsEffect = new SepiaEffect { Name = "sepiaEffect", Source = new CompositionEffectSourceParameter("source") }; var effectFactory = _compositor.CreateEffectFactory(graphicsEffect); var effectBrush = effectFactory.CreateBrush(); sepiaVisual.Brush = effectBrush; effectBrush.SetSourceParameter("source", surfaceBrush); }
Per prima cosa otteniamo una riferimento al ContainerVisual del nostro Canvas e tramite esso al suo relativo Compositor. Successivamente, usiamo la classe CompositionImageFactory per creare il loader dell'immagine che useremo come esempio.
La classe CompositionImageFactory è disponibile tramite il Windows.UI.Composition.Toolkit attualmente disponibile solo su GitHub.
Essendo il codice di creazione del Visual e del caricamento dell'immagine abbastanza auto esplicativo, passiamo direttamente alla parte dove istanziamo l'oggetto di tipo SepiaEffect.
Questo oggetto rappresenta l'effetto che verrà applicato alla nostra immagine. Dopo averlo compilato e averne creato un Brush che associamo al nostro Visual non ci rimane che settare la sorgente del nostro effect brush tramite il metodo SetSourceParameter.
Il risultato di questo codice è mostrato nell'immagine sottostante (che riporta anche la versione originale dell'immagine)
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Eseguire una query su SQL Azure tramite un workflow di GitHub
Utilizzare Tailwind CSS all'interno di React: primi componenti
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Utilizzare Azure AI Studio per testare i modelli AI
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Inizializzare i container in Azure Container Apps
Gestire domini wildcard in Azure Container Apps
Reactive form tipizzati con modellazione del FormBuilder in Angular
Utilizzare le collection expression in C#
Gestire liste di tipi semplici con Entity Framework Core
Usare le collection expression per inizializzare una lista di oggetti in C#
I più letti di oggi
- Utilizzare Docker Compose con Azure App Service
- Utilizzare QuickGrid di Blazor con Entity Framework
- Modernizzare le applicazioni WPF e Windows Forms con Blazor
- ASP 3 per esempi
- annunciato #netstandard 2.1. .NET Core lo supporterà a partire da #netcore3, così come le prossime versione di #xamarin, #mono e #unity.il supporto per #netfx 4.8, invece, non ci sarà. https://aspit.co/bq2
- Steel Style CheckBox per Silverlight 4.0