Aracılığıyla paylaş

Grafik nesneleri boyama

Browse sample. Örneğe göz atın

.NET Çok platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI) grafikleri düz renkler, gradyanlar, yinelenen görüntüler ve desenlerle grafik nesneleri boyama özelliğini içerir.

Paint sınıfı, bir nesneyi çıkışıyla boyayan soyut bir sınıftır. öğesinden Paint türetilen sınıflar, bir nesneyi boyamanın farklı yollarını açıklar. Aşağıdaki listede .NET MAUI grafiklerinde kullanılabilen farklı boya türleri açıklanmaktadır:

Bu türlerin örnekleri, genellikle bir grafik nesnenin SetFillPaint dolgusu olarak boyamayı ayarlamak için yöntemi kullanılarak üzerinde boyanabilirICanvas.

sınıfıPaint, isteğe bağlı olarak bir Paint nesne için arka plan ve ForegroundColor ön plan renklerini tanımlamak için kullanılabilecek türündeki , ve özelliklerini Colorde tanımlarBackgroundColor.

Düz bir renk boyama

SolidPaint sınıfından türetilen Paint sınıfı, bir grafik nesnesini düz bir renkle boyamak için kullanılır.

SolidPaint sınıfı, boyanın rengini temsil eden türünde Colorbir Color özellik tanımlar. sınıfı, rengin 1'den küçük bir alfa değerine sahip olup olmadığını gösteren bir de özelliğine bool sahiptirIsTransparent.

SolidPaint nesnesi oluşturma

Bir nesnenin SolidPaint rengi genellikle oluşturucu aracılığıyla bir Color bağımsız değişken kullanılarak belirtilir:

SolidPaint solidPaint = new SolidPaint(Colors.Silver);

RectF solidRectangle = new RectF(100, 100, 200, 100);
canvas.SetFillPaint(solidPaint, solidRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(solidRectangle, 12);

SolidPaint nesnesi, yöntemin ilk bağımsız değişkeni SetFillPaint olarak belirtilir. Bu nedenle, doldurulmuş yuvarlatılmış dikdörtgen gümüş SolidPaint bir nesneyle boyanmış:

Screenshot of a rounded rectangle, filled with a silver SolidPaint object.

Alternatif olarak, renk özelliğiyle Color belirtilebilir:

SolidPaint solidPaint = new SolidPaint
{
    Color = Colors.Silver
};

RectF solidRectangle = new RectF(100, 100, 200, 100);
canvas.SetFillPaint(solidPaint, solidRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(solidRectangle, 12);

Resim boyama

ImagePaint sınıfından türetilen Paint sınıfı, bir grafik nesnesini bir görüntüyle boyamak için kullanılır.

ImagePaint sınıfı, boyanacak görüntüyü temsil eden türünde IImagebir Image özellik tanımlar. sınıfının da döndüren falsebir IsTransparent özelliği vardır.

ImagePaint nesnesi oluşturma

Bir nesneyi resimle boyamak için, görüntüyü yükleyin ve nesnenin Image özelliğine atayın ImagePaint .

Dekont

Bir derlemeye eklenmiş bir görüntüyü yüklemek için görüntünün derleme eyleminin Eklenmiş Kaynak olarak ayarlanması gerekir.

Aşağıdaki örnekte, bir görüntünün nasıl yüklenip dikdörtgenle doldurulduğu gösterilmektedir:

using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
using Microsoft.Maui.Graphics.Platform;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
    image = PlatformImage.FromStream(stream);
}

if (image != null)
{
    ImagePaint imagePaint = new ImagePaint
    {
        Image = image.Downsize(100)
    };
    canvas.SetFillPaint(imagePaint, RectF.Zero);
    canvas.FillRectangle(0, 0, 240, 300);
}

Bu örnekte görüntü derlemeden alınır ve akış olarak yüklenir. Görüntü yöntemi kullanılarak Downsize yeniden boyutlandırılır ve bağımsız değişken en büyük boyutunun 100 piksel olarak ayarlanması gerektiğini belirtir. Görüntüyü küçültme hakkında daha fazla bilgi için bkz . Görüntüyü küçültme.

Image nesnesinin ImagePaint özelliği görüntünün küçültülmiş sürümüne ayarlanır ve ImagePaint nesne bir nesneyi dolduracak boya olarak ayarlanır. Ardından boyayla doldurulmuş bir dikdörtgen çizilir:

Screenshot of a rectangle, filled with an image.

Dekont

Bir ImagePaint nesne, uzantı yöntemi tarafından AsPaint bir IImage nesneden de oluşturulabilir.

Alternatif olarak, SetFillImage uzantı yöntemi kodu basitleştirmek için kullanılabilir:

if (image != null)
{
    canvas.SetFillImage(image.Downsize(100));
    canvas.FillRectangle(0, 0, 240, 300);
}

Deseni boyama

PatternPaint sınıfından türetilen Paint sınıfı, grafik bir nesneyi desenle boyamak için kullanılır.

PatternPaint sınıfı, boyanacak deseni temsil eden türünde IPatternbir Pattern özellik tanımlar. Sınıfın ayrıca, boyanın arka plan veya ön plan renginin 1'den küçük bir alfa değerine sahip olup olmadığını gösteren bir özelliği bool de vardırIsTransparent.

PatternPaint nesnesi oluşturma

Bir alanı desenle boyamak için deseni oluşturun ve bir PatternPaint nesnenin Pattern özelliğine atayın.

Aşağıdaki örnekte, desen oluşturma ve nesneyi bununla doldurma işlemi gösterilmektedir:

IPattern pattern;

// Create a 10x10 template for the pattern
using (PictureCanvas picture = new PictureCanvas(0, 0, 10, 10))
{
    picture.StrokeColor = Colors.Silver;
    picture.DrawLine(0, 0, 10, 10);
    picture.DrawLine(0, 10, 10, 0);
    pattern = new PicturePattern(picture.Picture, 10, 10);
}

// Fill the rectangle with the 10x10 pattern
PatternPaint patternPaint = new PatternPaint
{
    Pattern = pattern
};
canvas.SetFillPaint(patternPaint, RectF.Zero);
canvas.FillRectangle(10, 10, 250, 250);

Bu örnekte desen, (0,0) ile (10,10) arasında çapraz çizgi ve (0,10) ile (10,0) arasında çapraz çizgi içeren 10x10 alandır. Pattern nesnesinin PatternPaint özelliği desene ayarlanır ve PatternPaint nesne bir nesneyi doldurmak için boya olarak ayarlanır. Ardından boyayla doldurulmuş bir dikdörtgen çizilir:

Screenshot of a rectangle, filled with a silver pattern.

Dekont

Bir PatternPaint nesne, uzantı yöntemi tarafından AsPaint bir PicturePattern nesneden de oluşturulabilir.

Gradyan boyama

GradientPaint sınıfından türetilen sınıfı, gradyan adımlarından Paint oluşan gradyanı tanımlayan soyut bir temel sınıftır. Bir GradientPaint grafik nesneyi, bir eksen boyunca birbirine karışan birden çok renkle boyar. 'den GradientPaint türetilen sınıflar gradyan duraklarını yorumlamanın farklı yollarını açıklar ve .NET MAUI grafikleri aşağıdaki gradyan boyaları sağlar:

GradientPaint sınıfı, fırçanın GradientStops gradyan duraklarını temsil eden türündeki PaintGradientStopözelliğini tanımlar ve bunların her biri gradyan ekseni boyunca bir renk ve uzaklık belirtir.

Gradyan durakları

Gradyan durakları bir gradyanın yapı taşlarıdır ve gradyandaki renkleri ve gradyan ekseni boyunca konumlarını belirtir. Gradyan durakları nesneler kullanılarak PaintGradientStop belirtilir.

PaintGradientStop sınıfı aşağıdaki özellikleri tanımlar:

  • Color, türündedir Colorve gradyan durağının rengini temsil eder.
  • Offset, türündedir floatve gradyan vektörünün içindeki gradyan durağının konumunu temsil eder. Geçerli değerler 0,0-1,0 aralığındadır. Bu değer 0'a ne kadar yakınsa, renk gradyanın başlangıcına o kadar yakındır. Benzer şekilde, bu değer 1'e ne kadar yakınsa, renk gradyanın sonuna o kadar yakın olur.

Önemli

Gradyanlar tarafından kullanılan koordinat sistemi, grafik nesnenin sınırlayıcı kutusuna göre değişir. 0 sınırlayıcı kutunun yüzde 0'ını, 1 ise sınırlayıcı kutunun yüzde 100'unu gösterir. Bu nedenle (0,5,0,5), sınırlayıcı kutunun ortasındaki bir noktayı tanımlar ve (1,1) sınırlayıcı kutunun sağ alt kısmındaki bir noktayı açıklar.

Gradyan durakları yöntemiyle bir GradientPaint nesneye AddOffset eklenebilir.

Aşağıdaki örnek dört renkle bir çapraz LinearGradientPaint oluşturur:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    StartPoint = new Point(0, 0),
    EndPoint = new Point(1, 1)
};

linearGradientPaint.AddOffset(0.25f, Colors.Red);
linearGradientPaint.AddOffset(0.75f, Colors.Blue);

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);

Gradyan durakları arasındaki her noktanın rengi, iki sınırlayıcı gradyan durağı tarafından belirtilen rengin bir bileşimi olarak ilişkilendirilmiş. Aşağıdaki diyagramda önceki örnekteki gradyan durakları gösterilmektedir:

Screenshot of a rounded rectangle, filled with a diagonal LinearGradientPaint.

Bu diyagramda, daireler gradyan duraklarının konumunu işaretler ve kesikli çizgi gradyan eksenini gösterir. İlk gradyan durağı 0,0 uzaklığında sarı rengi belirtir. İkinci gradyan durağı 0,25 uzaklığında kırmızı rengi belirtir. Gradyan ekseni boyunca soldan sağa doğru ilerlerken bu iki gradyan durağı arasındaki noktalar kademeli olarak sarıdan kırmızıya dönüşür. Üçüncü gradyan durağı 0,75 uzaklığında mavi rengi belirtir. İkinci ve üçüncü gradyan durakları arasındaki noktalar yavaş yavaş kırmızıdan maviye dönüşür. Dördüncü gradyan durağı, 1,0 uzaklığında kireç yeşili rengini belirtir. Üçüncü ve dördüncü gradyan durakları arasındaki noktalar yavaş yavaş maviden kireç yeşiline dönüşür.

Doğrusal gradyan boyama

LinearGradientPaint sınıfından türetilen GradientPaint sınıfı, doğrusal gradyan ile bir grafik nesnesi boyar. Doğrusal gradyan, gradyan ekseni olarak bilinen bir çizgi boyunca iki veya daha fazla rengi karıştırır. PaintGradientStop nesneleri, gradyandaki renkleri ve konumlarını belirtmek için kullanılır. Nesneler hakkında PaintGradientStop daha fazla bilgi için bkz . Gradyan boyama.

LinearGradientPaint sınıfı aşağıdaki özellikleri tanımlar:

  • StartPoint, türündeki Pointdoğrusal gradyanın başlangıç iki boyutlu koordinatlarını temsil eder. Sınıf oluşturucu bu özelliği (0,0) olarak başlatır.
  • EndPoint, türündedir Pointve doğrusal gradyanın son iki boyutlu koordinatlarını temsil eder. Sınıf oluşturucu bu özelliği (1,1) olarak başlatır.

LinearGradientPaint nesnesi oluşturma

Doğrusal gradyanın gradyan durakları gradyan ekseni boyunca konumlandırılır. Gradyan ekseninin yönü ve boyutu ve EndPoint özellikleri kullanılarak StartPoint değiştirilebilir. Bu özellikleri değiştirerek yatay, dikey ve çapraz gradyanlar oluşturabilir, gradyan yönünü tersine çevirebilir, gradyan yayılımı daraltabilir ve daha fazlasını yapabilirsiniz.

StartPoint ve EndPoint özellikleri, boyanmakta olan grafik nesneye göredir. (0,0), boyanmakta olan nesnenin sol üst köşesini ve (1,1) boyanmakta olan nesnenin sağ alt köşesini temsil eder. Aşağıdaki diyagramda çapraz doğrusal gradyan fırçasının gradyan ekseni gösterilmektedir:

The gradient axis for diagonal linear gradient.

Bu diyagramda kesikli çizgi, gradyanın başlangıç noktasından bitiş noktasına kadar olan ilişkilendirme yolunu vurgulayan gradyan eksenini gösterir.

Yatay doğrusal gradyan oluşturma

Yatay doğrusal gradyan oluşturmak için bir LinearGradientPaint nesne oluşturun ve nesnenin StartColor ve EndColor özelliklerini ayarlayın. Ardından değerini (1,0) olarak ayarlayın EndPoint .

Aşağıdaki örnekte yatay LinearGradientPaintoluşturma gösterilmektedir:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    // StartPoint is already (0,0)
    EndPoint = new Point(1, 0)
};

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);

Bu örnekte yuvarlatılmış dikdörtgen, yatay olarak sarıdan yeşile doğru ilişkilendirilmiş doğrusal bir gradyanla boyanmış:

Screenshot of a rounded rectangle, filled with a horizontal linear gradient.

Dikey doğrusal gradyan oluşturma

Dikey doğrusal gradyan oluşturmak için bir LinearGradientPaint nesne oluşturun ve nesnenin StartColor ve EndColor özelliklerini ayarlayın. Ardından değerini (0,1) olarak ayarlayın EndPoint .

Aşağıdaki örnekte dikey LinearGradientPaintoluşturma gösterilmektedir:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    // StartPoint is already (0,0)
    EndPoint = new Point(0, 1)
};

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);

Bu örnekte yuvarlatılmış dikdörtgen, dikey olarak sarıdan yeşile doğru ilişkilendirilmiş doğrusal bir gradyanla boyanmış:

Screenshot of a rounded rectangle, filled with a vertical linear gradient.

Çapraz doğrusal gradyan oluşturma

Çapraz doğrusal gradyan oluşturmak için bir LinearGradientPaint nesne oluşturun ve nesnenin StartColor ve EndColor özelliklerini ayarlayın.

Aşağıdaki örnekte çapraz LinearGradientPaintoluşturma gösterilmektedir:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    // StartPoint is already (0,0)
    // EndPoint is already (1,1)
};

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);

Bu örnekte yuvarlatılmış dikdörtgen, çapraz olarak sarıdan yeşile doğru ilişkilendirilmiş doğrusal bir gradyanla boyanmış:

Screenshot of a rounded rectangle, filled with a diagonal linear gradient.

Radyal gradyan boyama

RadialGradientPaint sınıfından türetilen GradientPaint sınıfı, radyal gradyan ile bir grafik nesnesi boyar. Radyal gradyan, daire boyunca iki veya daha fazla rengi karıştırır. PaintGradientStop nesneleri, gradyandaki renkleri ve konumlarını belirtmek için kullanılır. Nesneler hakkında PaintGradientStop daha fazla bilgi için bkz . Gradyan boyama.

RadialGradientPaint sınıfı aşağıdaki özellikleri tanımlar:

  • Center, türündedir Pointve radyal gradyan için dairenin orta noktasını temsil eder. Sınıf oluşturucu bu özelliği (0.5,0.5) olarak başlatır.
  • Radius, türündedir doubleve radyal gradyan için dairenin yarıçapını temsil eder. Sınıf oluşturucu bu özelliği 0,5 olarak başlatır.

RadialGradientPaint nesnesi oluşturma

Radyal gradyanın gradyan durakları, daire tarafından tanımlanan gradyan ekseni boyunca konumlandırılır. Gradyan ekseni dairenin merkezinden çevresine yayılımı gösterir. Dairenin konumu ve boyutu ve Radius özellikleri kullanılarak Center değiştirilebilir. Daire gradyanın bitiş noktasını tanımlar. Bu nedenle, 1,0'daki gradyan durağı, dairenin çevresinin rengini tanımlar. 0,0'daki gradyan durağı, dairenin ortasındaki rengi tanımlar.

Radyal gradyan oluşturmak için bir RadialGradientPaint nesne oluşturun ve nesnesini StartColor ve EndColor özelliklerini ayarlayın. Ardından ve Radius özelliklerini ayarlayınCenter.

Aşağıdaki örnekte, ortalanmış bir oluşturma gösterilmektedir RadialGradientPaint:

RadialGradientPaint radialGradientPaint = new RadialGradientPaint
{
    StartColor = Colors.Red,
    EndColor = Colors.DarkBlue
    // Center is already (0.5,0.5)
    // Radius is already 0.5
};

RectF radialRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(radialGradientPaint, radialRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(radialRectangle, 12);

Bu örnekte yuvarlatılmış dikdörtgen, kırmızıdan koyu maviye ilişkilendirilmiş radyal gradyanla boyanmış. Radyal gradyanın merkezi dikdörtgenin ortasına yerleştirilir:

Screenshot of a rounded rectangle, filled with a centered radial gradient.

Aşağıdaki örnek radyal gradyanın merkezini dikdörtgenin sol üst köşesine taşır:

RadialGradientPaint radialGradientPaint = new RadialGradientPaint
{
    StartColor = Colors.Red,
    EndColor = Colors.DarkBlue,
    Center = new Point(0.0, 0.0)
    // Radius is already 0.5
};

RectF radialRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(radialGradientPaint, radialRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(radialRectangle, 12);

Bu örnekte yuvarlatılmış dikdörtgen, kırmızıdan koyu maviye ilişkilendirilmiş radyal gradyanla boyanmış. Radyal gradyanın merkezi dikdörtgenin sol üst kısmına yerleştirilir:

Screenshot of a rounded rectangle, filled with a top-left radial gradient.

Aşağıdaki örnek radyal gradyanın merkezini dikdörtgenin sağ alt köşesine taşır:

RadialGradientPaint radialGradientPaint = new RadialGradientPaint
{
    StartColor = Colors.Red,
    EndColor = Colors.DarkBlue,
    Center = new Point(1.0, 1.0)
    // Radius is already 0.5
};

RectF radialRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(radialGradientPaint, radialRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(radialRectangle, 12);

Bu örnekte yuvarlatılmış dikdörtgen, kırmızıdan koyu maviye ilişkilendirilmiş radyal gradyanla boyanmış. Radyal gradyanın merkezi dikdörtgenin sağ alt kısmına yerleştirilir:

Screenshot of a rounded rectangle, filled with a bottom-right radial gradient.