UWP Saydam png renk yerleşimi

Question

UWP C# projemde bir görüntü var, beyaz ön plana sahip şeffaf bir png. Şimdi bu png görüntüsündeki beyaz rengi başka bir renge (mavimsi) dönüştürmek istiyorum.

Örnek (renkli görüntünün saydam bir arka planı olmadığını unutmayın. Bunun nedeni, kullandığım kötü görüntü işleme yazılımıdır ve beyaz renkteki değişikliği göstermektir. Arka Plan sonuçta saydam olmalıdır). Bu birlik içinde mümkün olduğunu

Hatırladığım

, şimdi bir UWP-app şimdi bunu yapmak istiyor. Lumia ImagingSDK veya belki de Composition API'u kullanmayı düşündüm, ama bilmiyorum, bunlarla da yapmak için sıcak.

Answer 1

Bunu yapmanın bir yolu, Kompozisyon efekt sistemini kullanmaktır. En az 10586 oluşturmak Hedefleme

Ön şartlar

1. (Bileşim API daha önce deneysel olarak).
2. Kesinlikle gerekli olmamakla birlikte, Görsel Katman hakkında temel bir anlayışa sahip olmak zarar vermez. Bu konuya bir giriş olan bir blog yazısı yazdım here.
3. Win2D nuget paketinin eklenmesi.

Ayrıca, bir XAML uygulamasında Kompozisyon API'sini kullanarak çalışmaya başlamanız için hızlı bir yol olan here yazdığım bir özete 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.

Gettings

Sen özünden çok benzer bir şey yapmak isteyeceksiniz başladı, ancak bunun yerine bir InvertEffect tanımlama, tanımlamak isteyeceksiniz hem CompositeEffect ve ColorSourceEffect. Bunun yapacağı şey bir görüntüyü alıp bir "maske" olarak kullanmaktır ve sonra görüntüdeki beyazı bir renkle değiştirir. Böyle bir etki tanımlarsınız:

IGraphicsEffect graphicsEffect = new CompositeEffect 
{ 
    Mode = Microsoft.Graphics.Canvas.CanvasComposite.DestinationIn, 
    Sources = 
    { 
     new ColorSourceEffect 
     { 
      Name = "colorSource", 
      Color = Color.FromArgb(255, 255, 255, 255) 
     }, 
     new CompositionEffectSourceParameter("mask") 
    } 
}; 

sonraki adım bir efekt fabrikası oluşturmaktır: Gerekli olmasa da

var effectFactory = compositor.CreateEffectFactory(graphicsEffect, new string[] { "colorSource.Color" }); 

ikinci parametre, muhtemelen bu durumda istediğiniz şeydir. Bu parametreyi ayarlamak, efekt derlendikten sonra özelliği değiştirmenize olanak tanır; bu, el ile ve oluşturduğunuz her yeni efekt fırçasını ayarlamanıza veya bu özelliği efekt fırçasında canlandırmanıza olanak tanır. Sadece manuel olarak ayarlayacağız. Yeni efekt fırçasını oluşturmak için yeni efekt fabrikanızı kullanın. Bu fabrika Yukarıda kullanılan tanımıyla birçok yeni efekt fırçalarını oluşturabileceklerini unutmayın:

var effectBrush = effectFactory.CreateBrush(); 

Ancak lütfen öncelikle maske olarak görüntüyü uygulamak gerekir. Resminizi CompositionImageLoader adlı bir kitaplık kullanarak bir yüzeye yükleyebilirsiniz. Ayrıca onu nuget'e indirebilirsiniz. Resminizle bir yüzey oluşturduktan sonra, CompositionSurfaceBrush oluşturun ve bunu bir efekte uygulayın.muhtemelen tekrar tekrar bir reklam oluşturmayla yerde senin ImageLoader tutmak ve gereken

var imageLoader = ImageLoaderFactory.CreateImageLoader(compositor); 

var surface = imageLoader.LoadImageFromUri(new Uri("ms-appx:///Assets/Images/HAvng.png")); 
var brush = compositor.CreateSurfaceBrush(surface); 

effectBrush.SetSourceParameter("mask", brush); 

Not pahalı olacaktır.

visual.Brush = effectBrush; 

effectBrush.Properties.InsertColor("colorSource.Color", Colors.Red); 

Sonra bitirdiniz: Bütün bunlar yapmak kaldı görsel efekt fırçasını uygulamak ve rengini ayarlamak olduğunu! Bundan sonra rengi değiştirmek isterseniz, tek yapmanız gereken, yukarıdaki gibi yeni bir renkle aynı InsertColor yöntemini çağırmaktır.

benim test kodu

, yöntem bu gibi görünüyordu Nihai Ürün: Bu örnekteki görsel benim MainPage olduğu, this bağlıydı o

var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor; 
var visual = compositor.CreateSpriteVisual(); 

visual.Size = new Vector2(83, 86); 
visual.Offset = new Vector3(50, 50, 0); 

_imageLoader = ImageLoaderFactory.CreateImageLoader(compositor); 

var surface = _imageLoader.LoadImageFromUri(new Uri("ms-appx:///Assets/Images/HAvng.png")); 
var brush = compositor.CreateSurfaceBrush(surface); 

IGraphicsEffect graphicsEffect = new CompositeEffect 
{ 
    Mode = Microsoft.Graphics.Canvas.CanvasComposite.DestinationIn, 
    Sources = 
    { 
     new ColorSourceEffect 
     { 
      Name = "colorSource", 
      Color = Color.FromArgb(255, 255, 255, 255) 
     }, 
     new CompositionEffectSourceParameter("mask") 
    } 
}; 

_effectFactory = compositor.CreateEffectFactory(graphicsEffect, new string[] { "colorSource.Color" }); 
var effectBrush = _effectFactory.CreateBrush(); 

effectBrush.SetSourceParameter("mask", brush); 

visual.Brush = effectBrush; 

effectBrush.Properties.InsertColor("colorSource.Color", Colors.Red); 

ElementCompositionPreview.SetElementChildVisual(this, visual); 

Not. Herhangi bir XAML öğesine ekleyebilirsiniz. XAML işaretlemenizde tanımlayabileceğiniz ve denetimi yeniden boyutlandırırken görselinizi yeniden boyutlandıran ve sonra yeniden boyutlandıran bir özel denetim örneği görmek isterseniz, here'u bulabilirsiniz.

Daha fazla Kompozisyon ile ilgili şeyler görmek için, bizim GitHub page bizim için gel! API ile ilgili olabilecek sorularınızda size yardımcı olmaktan memnuniyet duyarız.