Grafik nesneleri çizme

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

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI) grafikleri, Microsoft.Maui.Graphics ad alanında nesne olarak ICanvas tanımlanan bir tuvale grafik nesneler çizmenizi sağlar.

.NET MAUI GraphicsView denetimi, üzerinde özelliklerin ayarlanabildiği ve grafik nesneleri çizmek için çağrılan yöntemlerin bulunduğu bir ICanvas nesneye erişim sağlar. hakkında GraphicsViewdaha fazla bilgi için bkz . GraphicsView.

Not

Grafik nesnelerin çoğu ve Fill yöntemlerine sahiptirDraw, örneğin DrawRectangle ve FillRectangle. Yöntem Draw , doldurulmamış şeklin ana hattını çizer. Yöntem Fill şeklin ana hattını çizer ve ayrıca doldurur.

Grafik nesneler, her platform tarafından tanınan cihazdan bağımsız bir birim kullanılarak üzerine ICanvas çizilir. Bu, grafik nesnelerin temel platformun piksel yoğunluğuna uygun şekilde ölçeklendirilmesini sağlar.

Çizgi çizme

Satırlar, yöntemi kullanılarak DrawLine bir ICanvas üzerine çizilebilir ve bu, satırın başlangıç ve bitiş noktalarını temsil eden dört float bağımsız değişken gerektirir.

Aşağıdaki örnekte çizgi çizme gösterilmektedir:

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 6;
canvas.DrawLine(10, 10, 90, 100);

Bu örnekte kırmızı çapraz çizgi (10,10) ile (90.100) arasında çizilmiştir:

Screenshot of a red line.

Not

Ayrıca iki PointF bağımsız değişken alan bir DrawLine aşırı yükleme vardır.

Aşağıdaki örnekte kesikli çizgi çizme gösterilmektedir:

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.StrokeDashPattern = new float[] { 2, 2 };
canvas.DrawLine(10, 10, 90, 100);

Bu örnekte, (10,10) ile (90.100) arasında kırmızı kesikli çapraz çizgi çizilmiştir:

Screenshot of a dashed red line.

Kesikli çizgiler hakkında daha fazla bilgi için bkz . Kesikli nesneler çizme.

Üç nokta çizme

Üç nokta ve daireler, türündeki DrawEllipsefloat, y, widthve height bağımsız değişkenleri gerektiren xyöntemi kullanılarak üzerine ICanvas çizilebilir.

Aşağıdaki örnekte üç nokta çizme gösterilmektedir:

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.DrawEllipse(10, 10, 100, 50);

Bu örnekte, 100x50 boyutlarına sahip kırmızı bir elips (10,10) konumunda çizilir:

Screenshot of a red ellipse.

Daire çizmek için ve height bağımsız değişkenlerini yöntemine DrawEllipse eşit hale getirinwidth:

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.DrawEllipse(10, 10, 100, 100);

Bu örnekte, 100x100 boyutlarına sahip kırmızı bir daire (10,10) konumunda çizilir:

Screenshot of a red circle.

Not

Daireleri de yöntemi ile DrawCircle çizilebilir.

Kesikli üç nokta çizme hakkında bilgi için bkz . Kesikli nesneler çizme.

Türü , , widthve height bağımsız değişkenleri floatde gerektiren yxyöntemiyle FillEllipse dolu bir üç nokta çizilebilir:

canvas.FillColor = Colors.Red;
canvas.FillEllipse(10, 10, 150, 50);

Bu örnekte, 150x50 boyutlarına sahip kırmızı dolgulu üç nokta (10,10) konumunda çizilir:

Screenshot of a red filled ellipse.

FillColor yöntemini çağırmadan önce nesnesinin ICanvasFillEllipse özelliği olarak Color ayarlanmalıdır.

Dolgulu daireler de yöntemiyle FillCircle çizilebilir.

Not

DrawEllipse ve FillEllipse bağımsız değişkenlerini kullanan Rect ve RectF aşırı yüklemeleri vardır. Ayrıca ve FillCircle aşırı yüklemeleri de DrawCircle vardır.

Dikdörtgen çizme

Dikdörtgenler ve kareler, türündeki DrawRectanglefloat, y, widthve height bağımsız değişkenleri gerektiren xyöntemi kullanılarak üzerine ICanvas çizilebilir.

Aşağıdaki örnekte dikdörtgen çizme gösterilmektedir:

canvas.StrokeColor = Colors.DarkBlue;
canvas.StrokeSize = 4;
canvas.DrawRectangle(10, 10, 100, 50);

Bu örnekte, 100x50 boyutlarına sahip koyu mavi bir dikdörtgen (10,10) konumunda çizilir:

Screenshot of a dark blue rectangle.

Kare çizmek için ve height bağımsız değişkenlerini yöntemine DrawRectangle eşit hale getirinwidth:

canvas.StrokeColor = Colors.DarkBlue;
canvas.StrokeSize = 4;
canvas.DrawRectangle(10, 10, 100, 100);

Bu örnekte, 100x100 boyutlarına sahip koyu mavi bir kare (10,10) konumunda çizilir:

Screenshot of a dark blue square.

Kesikli dikdörtgen çizme hakkında bilgi için bkz . Kesikli nesneler çizme.

Türü , , widthyve height bağımsız değişkenleri floatde gerektiren xyöntemiyle FillRectangle doldurulmuş bir dikdörtgen çizilebilir:

canvas.FillColor = Colors.DarkBlue;
canvas.FillRectangle(10, 10, 100, 50);

Bu örnekte, 100x50 boyutlarına sahip koyu mavi dolgulu bir dikdörtgen (10,10) konumunda çizilmiştir:

Screenshot of a dark blue filled rectangle.

FillColor yöntemini çağırmadan önce nesnesinin ICanvasFillRectangle özelliği olarak Color ayarlanmalıdır.

Not

DrawRectangle ve FillRectangle bağımsız değişkenlerini kullanan Rect ve RectF aşırı yüklemeleri vardır.

Yuvarlatılmış dikdörtgen çizme

Yuvarlatılmış dikdörtgenler ve kareler, türündeki DrawRoundedRectanglefloat, y, heightwidthve cornerRadius bağımsız değişkenleri gerektiren xyöntemi kullanılarak üzerine ICanvas çizilebilir. cornerRadius bağımsız değişkeni, dikdörtgenin köşelerini yuvarlamada kullanılan yarıçapı belirtir.

Aşağıdaki örnekte yuvarlatılmış dikdörtgenin nasıl çizilir gösterilmektedir:

canvas.StrokeColor = Colors.Green;
canvas.StrokeSize = 4;
canvas.DrawRoundedRectangle(10, 10, 100, 50, 12);

Bu örnekte, yuvarlak köşeleri ve boyutları 100x50 olan yeşil bir dikdörtgen (10,10) konumunda çizilir:

Screenshot of a green rounded rectangle.

Kesikli yuvarlatılmış dikdörtgen çizme hakkında bilgi için bkz . Kesikli nesneler çizme.

Türü , , widthy, heightve cornerRadius bağımsız değişkenleri floatde gerektiren xyöntemiyle FillRoundedRectangle doldurulmuş bir yuvarlatılmış dikdörtgen çizilebilir:

canvas.FillColor = Colors.Green;
canvas.FillRoundedRectangle(10, 10, 100, 50, 12);

Bu örnekte, yuvarlak köşeleri ve boyutları 100x50 olan yeşil dolgulu dikdörtgen (10,10) konumunda çizilmiştir:

Screenshot of a green filled rounded rectangle.

FillColor yöntemini çağırmadan önce nesnesinin ICanvasFillRoundedRectangle özelliği olarak Color ayarlanmalıdır.

Not

DrawRoundedRectangle ve bağımsız değişkenlerini alan Rect ve FillRoundedRectangleRectF aşırı yüklemeleri ve her köşenin yarıçapının ayrı olarak belirtilmesine olanak tanıyan aşırı yüklemeler vardır.

Yay çizme

Yaylar, ve türünde bağımsız değişkenler ve türünde floatclockwiseclosed bağımsız değişkenler boolgerektiren heightxywidthstartAngleyöntemi kullanılarak DrawArc üzerine ICanvas çizilebilir.endAngle startAngle bağımsız değişkeni x ekseninden yayının başlangıç noktasına kadar olan açıyı belirtir. endAngle bağımsız değişkeni x ekseninden yayının bitiş noktasına kadar olan açıyı belirtir. clockwise bağımsız değişkeni, yayının çizildiği yönü belirtir ve closed bağımsız değişken de yayının bitiş noktasının başlangıç noktasına bağlanıp bağlanmayacağını belirtir.

Aşağıdaki örnekte bir yay çizme gösterilmektedir:

canvas.StrokeColor = Colors.Teal;
canvas.StrokeSize = 4;
canvas.DrawArc(10, 10, 100, 100, 0, 180, true, false);

Bu örnekte 100x100 boyutlu bir deal yay (10,10) konumunda çizilmiştir. Yay 0 dereceden 180 dereceye kadar saat yönünde çizilir ve kapatılamaz:

Screenshot of a teal arc.

Kesikli yay çizme hakkında bilgi için bkz . Kesikli nesneler çizme.

Dolu yay, türü , y, widthheightstartAngle, ve endAngle bağımsız değişkenleri ve türünde floatbir clockwise bağımsız değişken boolgerektiren xyöntemiyle FillArc çizilebilir:

canvas.FillColor = Colors.Teal;
canvas.FillArc(10, 10, 100, 100, 0, 180, true);

Bu örnekte, 100x100 boyutlarındaki doldurulmuş bir deniz mavisi yay (10,10) konumunda çizilir. Yay 0 dereceden 180 dereceye kadar saat yönünde çizilir ve otomatik olarak kapatılır:

Screenshot of a filled teal arc.

FillColor yöntemini çağırmadan önce nesnesinin ICanvasFillArc özelliği olarak Color ayarlanmalıdır.

Not

DrawArc ve FillArc bağımsız değişkenlerini kullanan Rect ve RectF aşırı yüklemeleri vardır.

Yol çizme

Yol, bir veya daha fazla konturdan oluşan bir koleksiyondur. Her dağılım, bağlı düz çizgilerden ve eğrilerden oluşan bir koleksiyondur. Konturlar birbirine bağlı değildir, ancak görsel olarak çakışabilir. Bazen tek bir kontur kendi kendine çakışabilir.

Yollar, eğrileri ve karmaşık şekilleri çizmek için kullanılır ve bağımsız değişken gerektiren PathF yöntemi kullanılarak DrawPath üzerine ICanvas çizilebilir.

Kontur genellikle yöntem çağrısıyla PathF.MoveTo başlar ve bu çağrıyı değer PointF olarak veya ayrı x ve y koordinatlar olarak ifade edebilirsiniz. Çağrısı, MoveTo konturun başında bir nokta ve ilk geçerli noktayı oluşturur. Ardından, kontura geçerli noktadan yönteminde belirtilen bir noktaya doğru veya eğriyle devam etmek için aşağıdaki yöntemleri çağırabilir ve bu da yeni geçerli nokta haline gelir:

  • LineTo yoluna düz bir çizgi eklemek için.
  • AddArc bir dairenin veya üç noktanın çevresi üzerindeki bir çizgi olan bir yay eklemek için.
  • CurveTo bir kübik Bezier spline eklemek için.
  • QuadTo İkinci dereceden Bezier spline eklemek için.

Bu yöntemlerden hiçbiri, çizgiyi veya eğriyi tanımlamak için gereken tüm verileri içermez. Bunun yerine, her yöntem hemen önünde yöntem çağrısı tarafından oluşturulan geçerli nokta ile çalışır. Örneğin, LineTo yöntemi geçerli noktaya göre dağılıma düz bir çizgi ekler.

Kontur, yeni bir kontura başlayan başka bir çağrısıyla MoveToveya konturu kapatan öğesine yapılan çağrıyla Closebiter. Close yöntemi geçerli noktadan konturun ilk noktasına otomatik olarak düz bir çizgi ekler ve yolu kapalı olarak işaretler.

PathF sınıfı, diğer yöntemleri ve özellikleri de tanımlar. Aşağıdaki yöntemler yola tüm dağılımları ekler:

Aşağıdaki örnekte yol çizme gösterilmektedir:

PathF path = new PathF();
path.MoveTo(40, 10);
path.LineTo(70, 80);
path.LineTo(10, 50);
path.Close();
canvas.StrokeColor = Colors.Green;
canvas.StrokeSize = 6;
canvas.DrawPath(path);

Bu örnekte, kapalı yeşil üçgen çizilir:

Screenshot of a closed green triangle.

ile doldurulmuş bir yol çizilebilir FillPathve bu da bir PathF bağımsız değişken gerektirir:

PathF path = new PathF();
path.MoveTo(40, 10);
path.LineTo(70, 80);
path.LineTo(10, 50);
canvas.FillColor = Colors.SlateBlue;
canvas.FillPath(path);

Bu örnekte, dolgulu bir kayrak mavi üçgen çizilir:

Screenshot of a filled slate blue triangle.

FillColor yöntemini çağırmadan önce nesnesinin ICanvasFillPath özelliği olarak Color ayarlanmalıdır.

Önemli

yöntemi, FillPath kullanılan doldurma algoritmasını ayarlayan belirtilmesine WindingMode olanak tanıyan bir aşırı yüklemeye sahiptir. Daha fazla bilgi için bkz . Sargı modları.

Resim çizme

Görüntüler, türünde bir IImage bağımsız değişken ve , y, widthve xheight bağımsız değişkenleri floatgerektiren yöntemi kullanılarak DrawImage üzerine ICanvas çizilebilir.

Aşağıdaki örnekte, bir görüntünün nasıl yüklenip tuvale çizilip çizilip çizilen olduğu gösterilmektedir:

using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
#if IOS || ANDROID || MACCATALYST
using Microsoft.Maui.Graphics.Platform;
#elif WINDOWS
using Microsoft.Maui.Graphics.Win2D;
#endif

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
#if IOS || ANDROID || MACCATALYST
    // PlatformImage isn't currently supported on Windows.
    image = PlatformImage.FromStream(stream);
#elif WINDOWS
    image = new W2DImageLoadingService().FromStream(stream);
#endif
}

if (image != null)
{
    canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}
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)
{
    canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}

Bu örnekte, bir görüntü derlemeden alınır ve akış olarak yüklenir. Ardından gerçek boyutta (10,10) çizilir:

Screenshot of an image.

Önemli

Bir derlemeye eklenmiş bir görüntüyü yüklemek için görüntünün oluşturma eyleminin MauiImage yerine Katıştırılmış Kaynak olarak ayarlanması gerekir.

Dize çizme

Dizeler, aşırı yüklemelerden biri DrawString kullanılarak üzerine ICanvas çizilebilir. Her dizenin görünümü, , FontColorve FontSize özellikleri ayarlanarak Fonttanımlanabilir. Dize hizalaması, dizenin sınırlayıcı kutusunda hizalamayı gerçekleştiren yatay ve dikey hizalama seçenekleriyle belirtilebilir.

Not

Bir dizenin sınırlayıcı kutusu , , ywidthve height bağımsız değişkenleriyle xtanımlanır.

Aşağıdaki örnekler, dizelerin nasıl çizeceğini gösterir:

canvas.FontColor = Colors.Blue;
canvas.FontSize = 18;

canvas.Font = Font.Default;
canvas.DrawString("Text is left aligned.", 20, 20, 380, 100, HorizontalAlignment.Left, VerticalAlignment.Top);
canvas.DrawString("Text is centered.", 20, 60, 380, 100, HorizontalAlignment.Center, VerticalAlignment.Top);
canvas.DrawString("Text is right aligned.", 20, 100, 380, 100, HorizontalAlignment.Right, VerticalAlignment.Top);

canvas.Font = Font.DefaultBold;
canvas.DrawString("This text is displayed using the bold system font.", 20, 140, 350, 100, HorizontalAlignment.Left, VerticalAlignment.Top);

canvas.Font = new Font("Arial");
canvas.FontColor = Colors.Black;
canvas.SetShadow(new SizeF(6, 6), 4, Colors.Gray);
canvas.DrawString("This text has a shadow.", 20, 200, 300, 100, HorizontalAlignment.Left, VerticalAlignment.Top);

Bu örnekte, farklı görünüm ve hizalama seçeneklerine sahip dizeler görüntülenir:

Screenshot of strings using different alignment options.

Not

Aşırı DrawString yüklemeler, kesilmesini ve satır aralığının belirtilmesine de olanak tanır.

Gölge çizme hakkında bilgi için bkz . Gölge çizme.

Öznitelikli metin çizme

Öznitelikli metin, türünde bir IAttributedText bağımsız değişken ve , y, widthve xheight bağımsız değişkenleri floatgerektiren yöntemi kullanılarak DrawText üzerine çizilebilirICanvas. Öznitelikli metin, genellikle stil verilerini temsil eden, metninin bölümleri için ilişkili özniteliklere sahip bir dizedir.

Aşağıdaki örnekte, öznitelikli metin çizme gösterilmektedir:

using Microsoft.Maui.Graphics.Text;
...

canvas.Font = new Font("Arial");
canvas.FontSize = 18;
canvas.FontColor = Colors.Blue;

string markdownText = @"This is *italic text*, **bold text**, __underline text__, and ***bold italic text***.";
IAttributedText attributedText = MarkdownAttributedTextReader.Read(markdownText); // Requires the Microsoft.Maui.Graphics.Text.Markdig package
canvas.DrawText(attributedText, 10, 10, 400, 400);

Bu örnekte markdown, öznitelikli metne dönüştürülür ve doğru stille görüntülenir:

Screenshot of correctly rendered markdown.

Önemli

Öznitelikli metin çizme, NuGet paketini projenize eklemenizi Microsoft.Maui.Graphics.Text.Markdig gerektirir.

Dolgu ve vuruşla çizim

Hem dolgu hem de vuruşlu grafik nesneler, bir dolgu yönteminden sonra çizim yöntemi çağrılarak tuvale çizilebilir. Örneğin, ana hatlı bir dikdörtgen çizmek için ve özelliklerini renkler olarak ayarlayınFillColor, ardından yöntemini ve ardından yöntemini çağırın FillRectangleDrawRectangle.StrokeColor

Aşağıdaki örnek, bir yol olarak kontur ana hattıyla dolu bir daire çizer:

float radius = Math.Min(dirtyRect.Width, dirtyRect.Height) / 4;

PathF path = new PathF();
path.AppendCircle(dirtyRect.Center.X, dirtyRect.Center.Y, radius);

canvas.StrokeColor = Colors.Blue;
canvas.StrokeSize = 10;
canvas.FillColor = Colors.Red;

canvas.FillPath(path);
canvas.DrawPath(path);

Bu örnekte, bir PathF nesne için kontur ve dolgu renkleri belirtilir. Dolu daire çizilir, ardından dairenin ana hat vuruşu:

Screenshot of a circle drawn with fill and stroke.

Uyarı

Bir doldurma yöntemi öncesinde draw yönteminin çağrılması yanlış bir z sırasına neden olur. Dolgu vuruşun üzerine çizilir ve vuruş görünmez.

Gölge çizme

üzerinde ICanvas çizilen grafik nesneler, aşağıdaki bağımsız değişkenleri alan yöntemi kullanılarak SetShadow bir gölge uygulanabilir:

  • offsettüründe SizeF, gölge için, gölgeyi oluşturan bir ışık kaynağının konumunu temsil eden bir uzaklık belirtir.
  • blurfloattüründe, gölgeye uygulanacak bulanıklaştırma miktarını temsil eder.
  • color, türündeki Colorgölgenin rengini tanımlar.

Aşağıdaki örneklerde, doldurulmuş nesnelere gölge ekleme gösterilmektedir:

canvas.FillColor = Colors.Red;
canvas.SetShadow(new SizeF(10, 10), 4, Colors.Grey);
canvas.FillRectangle(10, 10, 90, 100);

canvas.FillColor = Colors.Green;
canvas.SetShadow(new SizeF(10, -10), 4, Colors.Grey);
canvas.FillEllipse(110, 10, 90, 100);

canvas.FillColor = Colors.Blue;
canvas.SetShadow(new SizeF(-10, 10), 4, Colors.Grey);
canvas.FillRoundedRectangle(210, 10, 90, 100, 25);

Bu örneklerde, ışık kaynakları farklı konumlarda olan gölgeler, aynı miktarda bulanıklık ile doldurulmuş nesnelere eklenir:

Screenshot of a objects drawn with shadows.

Kesikli nesneler çizme

ICanvasnesneleri türünde float[]bir StrokeDashPattern özelliğe sahiptir. Bu özellik, bir nesne için vuruş çizilirken kullanılacak tire ve boşluk desenini gösteren bir değer dizisidir float . Dizideki her float biri bir tirenin veya boşluğun uzunluğunu belirtir. Dizideki ilk öğe bir tirenin uzunluğunu belirtirken, dizideki ikinci öğe bir boşluğun uzunluğunu belirtir. Bu nedenle, float çift dizin değerine sahip değerler tireler belirtirken float , tek dizin değerine sahip değerler boşluklar belirtir.

Aşağıdaki örnekte, normal tire kullanarak kesikli kare çizme gösterilmektedir:

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.StrokeDashPattern = new float[] { 2, 2 };
canvas.DrawRectangle(10, 10, 90, 100);

Bu örnekte, normal kesikli vuruşlu bir kare çizilir:

Screenshot of a regular dashed square.

Aşağıdaki örnekte, düzensiz tire kullanarak kesikli kare çizme gösterilmektedir:

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.StrokeDashPattern = new float[] { 4, 4, 1, 4 };
canvas.DrawRectangle(10, 10, 90, 100);

Bu örnekte düzensiz kesikli vuruşlu bir kare çizilmiştir:

Screenshot of an irregular dashed square.

Denetim çizgisi uçları

Bir çizginin üç parçası vardır: başlangıç başlığı, çizgi gövdesi ve uç üst sınırı. Başlangıç ve bitiş büyük harflerinde bir satırın başlangıcı ve sonu açıklanmaktadır.

ICanvas nesneleri, bir StrokeLineCap satırın başlangıcını ve sonunu açıklayan türünde LineCapbir özelliğe sahiptir. Numaralandırma LineCap aşağıdaki üyeleri tanımlar:

  • Butt, çizginin tam uç noktasına kadar genişletmek için çizilmiş, kare uçlu bir çizgiyi temsil eder. Bu özelliğin varsayılan değeridir StrokeLineCap .
  • Round, yuvarlak uçlu bir çizgiyi temsil eder.
  • Square, uç noktanın ötesine çizgi genişliğinin yarısına eşit bir uzaklık olacak şekilde genişletilecek şekilde çizilmiş, kare uçlu bir çizgiyi temsil eder.

Aşağıdaki örnekte özelliğin nasıl ayarlanacağı gösterilmektedir StrokeLineCap :

canvas.StrokeSize = 10;
canvas.StrokeColor = Colors.Red;
canvas.StrokeLineCap = LineCap.Round;
canvas.DrawLine(10, 10, 110, 110);

Bu örnekte, kırmızı çizgi satırın başında ve sonunda yuvarlanmış:

Screenshot of three lines with different line caps.

Denetim çizgisi birleşimleri

ICanvas nesneleri, bir StrokeLineJoin nesnenin LineJoinköşelerinde kullanılan birleştirme türünü belirten türünde bir özelliğe sahiptir. Numaralandırma LineJoin aşağıdaki üyeleri tanımlar:

  • Miter, keskin veya kırpılmış bir köşe oluşturan açısal köşeleri temsil eder. Bu özelliğin varsayılan değeridir StrokeLineJoin .
  • Round, köşede dairesel bir yay üreten yuvarlak köşeleri temsil eder.
  • Bevelköşegen köşe oluşturan eğimli köşeleri temsil eder.

Not

StrokeLineJoin özelliği olarak Miterayarlandığında, özelliği nesnedeki MiterLimit satır birleştirmelerinin sicim uzunluğunu sınırlamak için olarak float ayarlanabilir.

Aşağıdaki örnekte özelliğin nasıl ayarlanacağı gösterilmektedir StrokeLineJoin :

PathF path = new PathF();
path.MoveTo(10, 10);
path.LineTo(110, 50);
path.LineTo(10, 110);

canvas.StrokeSize = 20;
canvas.StrokeColor = Colors.Blue;
canvas.StrokeLineJoin = LineJoin.Round;
canvas.DrawPath(path);

Bu örnekte, mavi PathF nesne köşelerinde yuvarlatılmış birleşimler vardır:

Screenshot of the effect of the three different LineJoin enumeration members.

Nesneleri kırp

öğesine çizilen ICanvas grafik nesneler, çizimden önce aşağıdaki yöntemlerle kırpılabilir:

  • ClipPath bir nesneyi, yalnızca nesnenin bölgesinde PathF bulunan alanın görünür olması için klipler.
  • ClipRectangle bir nesneyi, yalnızca dikdörtgenin bölgesindeki alanın görünür olması için klipler. Dikdörtgen bağımsız değişkenler kullanılarak float veya bir Rect veya RectF bağımsız değişkeniyle belirtilebilir.
  • SubtractFromClip bir nesneyi, yalnızca dikdörtgenin bölgesinin dışındaki alanın görünür olması için klipler. Dikdörtgen bağımsız değişkenler kullanılarak float veya bir Rect veya RectF bağımsız değişkeniyle belirtilebilir.

Aşağıdaki örnekte, bir görüntüyü kırpmak için yönteminin ClipPath nasıl kullanılacağı gösterilmektedir:

using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
#if IOS || ANDROID || MACCATALYST
using Microsoft.Maui.Graphics.Platform;
#elif WINDOWS
using Microsoft.Maui.Graphics.Win2D;
#endif

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
#if IOS || ANDROID || MACCATALYST
    // PlatformImage isn't currently supported on Windows.
    image = PlatformImage.FromStream(stream);
#elif WINDOWS
    image = new W2DImageLoadingService().FromStream(stream);
#endif
}

if (image != null)
{
    PathF path = new PathF();
    path.AppendCircle(100, 90, 80);
    canvas.ClipPath(path);  // Must be called before DrawImage
    canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}
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)
{
    PathF path = new PathF();
    path.AppendCircle(100, 90, 80);
    canvas.ClipPath(path);  // Must be called before DrawImage
    canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}

Bu örnekte görüntü, 80 yarıçapı olan (100,90) konumunda ortalanmış bir daireyi tanımlayan bir nesne kullanılarak PathF kırpılır. Sonuç, görüntünün yalnızca daire içindeki kısmının görünür olmasıdır:

Screenshot of an image that's been clipped with the ClipPath method.

Önemli

ClipPath yöntemi, kırpma sırasında kullanılan doldurma algoritmasını ayarlayan belirtilmesine WindingMode olanak tanıyan bir aşırı yüklemeye sahiptir. Daha fazla bilgi için bkz . Sargı modları.

Aşağıdaki örnekte, bir görüntüyü kırpmak için yönteminin SubtractFromClip nasıl kullanılacağı gösterilmektedir:

using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
#if IOS || ANDROID || MACCATALYST
using Microsoft.Maui.Graphics.Platform;
#elif WINDOWS
using Microsoft.Maui.Graphics.Win2D;
#endif

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
#if IOS || ANDROID || MACCATALYST
    // PlatformImage isn't currently supported on Windows.
    image = PlatformImage.FromStream(stream);
#elif WINDOWS
    image = new W2DImageLoadingService().FromStream(stream);
#endif
}

if (image != null)
{
    canvas.SubtractFromClip(60, 60, 90, 90);
    canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}
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)
{
    canvas.SubtractFromClip(60, 60, 90, 90);
    canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}

Bu örnekte, yönteme sağlanan SubtractFromClip bağımsız değişkenler tarafından belirtilen dikdörtgen tarafından tanımlanan alan görüntüden kırpılır. Sonuç olarak, görüntünün yalnızca dikdörtgenin dışındaki bölümleri görünür olur:

Screenshot of an image that's been clipped with the SubtractFromClip method.