UWP App gerçek zamanlı DX Compositor kullanarak arka plan bulanıklık

Question

UWP Kompozisyon desteği bir süredir bir süre için dışarı çıktı (Ben gerçek zamanlı olarak hareket eden bulanıklaştırma yapmak için bir yol arıyorum) (hareket veya yükleme, statik anlık görüntü değil). Şimdiye kadar ben stackoverflow bazı cevaplara bakıyordum ve google bana Lumia Imaging SDK Sample ve Win2D kullanmak için bana yol. Hiçbiri gerçek zamanlı bulanıklık desteği için yeterince iyi değil. Kompozisyonda gerçek zamanlı bulanıklık yapmanın mümkün olduğunu biliyorum çünkü bulanık videoların demolarını gördüm ve 812 Uygulamalarında DX kullanarak neredeyse her şeyi bulanıklaştırmanızı sağlayan eski bir proje XAMLFx var.

RenderTargetBitmap kullanmak istemiyorum (UI iş parçacığımı ücretsiz tutmak istiyorum). Nasıl sadece kompozisyon API kullanarak bunu yapabilirsiniz:

Herhangi bir yardım büyük takdir

ContainerVisual rootVisual = GetVisual(this.Content); 
Compositor compositor = rootVisual.Compositor; 

// what next? 

:)

Answer 1

Not: Bu özellikler (bulanıklık ve Backdrop fırça) Yıldönümü Güncelleme gerektiren Windows 10. Size Şu anda Windows İçeriden Programı aracılığıyla SDK önizlemesini alabilirsiniz

Önkoşullar

1. Windows 10 Yıl Dönümü Güncelleştirmesini Hedefleme
2. Görsel Katman hakkında temel bir anlayış ve Görsel Ağacın nasıl çalıştığı. Daha fazla bilgi edinin here.

Ayrıca yukarı ve bir XAML uygulaması içinde Kompozisyon API kullanarak çalışır hale getirmek için hızlı bir yoldur Ben here yazdığı bir ana fikri, hiç bakabilirsiniz. Bir etkiyi de kullanarak gösterir. Sadece bu değil, aynı zamanda Kompozisyon API'sini (yazdığım bir paketle) kullanarak bir görüntüyü yüklemeyi de kapsar.

Eğer Kompozisyon API'leri bir bulanıklık efekti tüketebilir iki yolu vardır

Başlarken. Biri, tek bir yüzey için geçerli normal bir etkidir. Diğeri, tüm içeriği arkasına alan ve bulanıklaştıran bir "Backdrop" fırça olarak kullanmaktır.

Bir bulanıklık efekti kullanmak için, Win2D'den bir GaussianBlurEffect tanımı kullanmanız gerekir. Yani böyle bir şey gider:

GaussianBlurEffect blurEffect = new GaussianBlurEffect() 
{ 
    Name = "Blur", 
    BlurAmount = 0.0f, // You can place your blur amount here. 
    BorderMode = EffectBorderMode.Hard, 
    Optimization = EffectOptimization.Balanced, 
    Source = new CompositionEffectSourceParameter("source") 
}; 

sonraki adım bir efekt fabrikası oluşturmaktır: İkinci parametre gerekli değildir

var effectFactory = compositor.CreateEffectFactory(blurEffect, new[] {"Blur.BlurAmount"}); 

ancak bunu sağlayan Canlandırmak veya adını özelliğini değiştirmek için izin verir etki derlendi. Bu durumda, şimdi BlurAmount'ı değiştirebilir veya canlandırabiliriz. Birden çok bulanıklık efekti fırçası oluşturmak için bulanıklık efekti fabrikasını yeniden kullanmak istiyorsanız, ancak hepsinin farklı bir BlurAmount kullanmasını istiyorsanız, bu yararlıdır.

Bir sonraki adım, efektin nasıl çalışacağına bağlı olarak değişir.İstersen,

Ancak

var effectBrush = effectFactory.CreateBrush(); 
effectBrush.SetSourceParameter("source", someOtherSurfaceBrush); 
visual.Brush = effectBrush; 

Backdrop'u:

Yalnızca tek bir yüzeye uygulamak için isterseniz Tek Yüzey

, aşağıdakileri yapacağını Belirli bir görüntünün ardındaki dinamik bir sürü içeriği bulanıklaştırırsanız, aşağıdakileri yaparsınız:

var effectBrush = effectFactory.CreateBrush(); 
effectBrush.SetSourceParameter("source", compositor.CreateBackdropBrush()); 
visual.Brush = effectBrush; 

Bunun ilk yönteme çok benzediğine dikkat edin, ancak bir yüzey fırçasını vermek yerine bir BackdropBrush verin. Bu, görselin arkasındaki içeriği gerçek zamanlı olarak alacaktır ve efektinizin kaynağına besleyecektir. Bu durumda görselin "arkasında" bir şey bulanık olacaktır.

Performans

yalnızca tek bir görüntü bulanıklaştırma ediyorsanız, bu tek bir yüzey bulanıklık daha iyidir. Gerçekten ihtiyacınız olduğunda BackdropBrush'ı kullanmayı denemelisiniz.

Bana daha fazlasını göster!

Daha fazla görmek için, GitHub page ürünümüzü ziyaret edin! Size here yardım etmenizi sağlayacak özel bir XAML denetimi oluşturduk ve bunu here numaralı eylemde görebilirsiniz. // build talk here'u da görebilirsiniz.