共用方式為

繪製圖形物件

  • 發行項

Browse sample. 流覽範例

命名空間中的 Microsoft.Maui.Graphics .NET 多平臺應用程式 UI （.NET MAUI） 圖形可讓您在定義為 ICanvas 物件的畫布上繪製圖形物件。

.NET MAUI GraphicsView 控制件提供物件的存取 ICanvas 權，您可以在該物件上設定屬性，以及叫用方法來繪製圖形物件的方法。 如需 的詳細資訊 GraphicsView，請參閱 GraphicsView。

注意

許多圖形物件都有 Draw 和 Fill 方法，例如 DrawRectangle 和 FillRectangle。 方法 Draw 會繪製未填滿之圖形的外框。 方法 Fill 會繪製圖形的外框，並填滿它。

圖形化物件會使用每個平臺所辨識的裝置獨立單位來繪製 ICanvas 。 這可確保圖形化物件會適當地縮放至基礎平臺的圖元密度。

繪製線條

您可以使用 方法繪製線條，這需要四float個ICanvasDrawLine自變數來表示線條的起點和終點。

下列範例示範如何繪製線條：

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

在此範例中，紅色對角線是從 （10,10） 繪製到 （90,100）：

Screenshot of a red line.

注意

還有一個多載會採用兩PointF個DrawLine自變數。

下列範例示範如何繪製虛線：

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

在此範例中，從 （10,10） 到 （90,100） 繪製紅色虛線對角線：

Screenshot of a dashed red line.

如需虛線的詳細資訊，請參閱 繪製虛線物件。

繪製橢圓形

您可以使用 方法繪製ICanvasDrawEllipse橢圓形和圓形，此方法需要 x型float別為 的、y、 width和 height 自變數。

下列範例示範如何繪製橢圓形：

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

在此範例中，會繪製維度為 100x50 的紅色橢圓形（10,10）：

Screenshot of a red ellipse.

若要繪製圓形，請將 和 height 自變數DrawEllipse設為 width 方法相等：

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

在此範例中，以 100x100 維度繪製的紅色圓圈位於 （10,10）：

Screenshot of a red circle.

注意

您也可以使用 DrawCircle 方法繪製圓形。

如需繪製虛線橢圓形的相關信息，請參閱 繪製虛線物件。

您可以使用 方法繪製FillEllipse填滿橢圓形，此方法也需要 x類型float為、 ywidth、 和 height 自變數：

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

在此範例中，繪製維度為 150x50 的紅色填滿橢圓形（10,10）：

Screenshot of a red filled ellipse.

在FillColor叫用 方法之前FillEllipse，物件的屬性ICanvas必須設定為 Color 。

填滿的圓形也可以使用 方法繪製 FillCircle 。

注意

DrawEllipse有和 FillEllipse 多載會採用 Rect 和 RectF 自變數。 此外，也有 DrawCircle 和 FillCircle 多載。

繪製矩形

您可以使用 方法繪製ICanvasDrawRectangle矩形和正方形，此方法需要 x型float別為 的 、y、 width和 height 自變數。

下列範例示範如何繪製矩形：

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

在此範例中，繪製維度為 100x50 的深藍色矩形（10,10）：

Screenshot of a dark blue rectangle.

若要繪製正方形，請將 和 height 自變數DrawRectangle設為 width 方法相等：

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

在此範例中，以 100x100 為維度的深藍色方塊繪製於 （10,10）：

Screenshot of a dark blue square.

如需繪製虛線矩形的相關信息，請參閱 繪製虛線物件。

您可以使用 方法繪製FillRectangle填滿的矩形，此方法也需要 x類型float為 、y、 width和 height 自變數：

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

在此範例中，繪製維度為 100x50 的深藍色填滿矩形（10,10）：

Screenshot of a dark blue filled rectangle.

在FillColor叫用 方法之前FillRectangle，物件的屬性ICanvas必須設定為 Color 。

注意

DrawRectangle有和 FillRectangle 多載會採用 Rect 和 RectF 自變數。

繪製圓角矩形

您可以使用 方法繪製ICanvasDrawRoundedRectangle圓角矩形和方形，此方法需要 x型float別為 的 、y、width、 height和 cornerRadius 自變數。 自 cornerRadius 變數會指定用來圓角矩形圓角的半徑。

下列範例示範如何繪製圓角矩形：

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

在此範例中，以圓角和維度 100x50 繪製綠色矩形（10,10）：

Screenshot of a green rounded rectangle.

如需繪製虛線圓角矩形的相關信息，請參閱 繪製虛線物件。

您可以使用 方法繪製FillRoundedRectangle填滿圓角矩形，此方法也需要 x類型的 float、y、width、height、 和 cornerRadius 自變數：

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

在此範例中，以圓角和尺寸 100x50 繪製的綠色填滿矩形（10,10）：

Screenshot of a green filled rounded rectangle.

在FillColor叫用 方法之前FillRoundedRectangle，物件的屬性ICanvas必須設定為 Color 。

注意

DrawRoundedRectangle有 和 FillRoundedRectangle 多載會採用 Rect 和 RectF 自變數，以及可個別指定每個角落半徑的多載。

繪製弧線

您可以使用 方法繪製ICanvasDrawArc弧線，此方法需要 x型float別的 、y、heightwidth、、startAngle、 和 endAngle 自變數和 clockwise closed 型bool別的自變數。 自 startAngle 變數會指定從 X 軸到弧線起點的角度。自 endAngle 變數會指定從 X 軸到弧線終點的角度。自 clockwise 變數會指定繪製弧線的方向，而 closed 自變數會指定弧線的終點是否要連接到起點。

下列範例示範如何繪製弧線：

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

在此範例中，100x100 的圓弧線繪製於 （10,10）。 弧線會以順時針方向繪製，從 0 度到 180 度，而且不會關閉：

Screenshot of a teal arc.

如需繪製虛線弧線的相關信息，請參閱 繪製虛線物件。

您可以使用 方法繪製FillArc填滿弧線，此方法需要 x類型float為 、y、、widthheight、、 startAngle和 endAngle 自變數，以及 clockwise 類型的bool自變數：

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

在此範例中，以 100x100 繪製維度的填滿茶點弧線（10,10）。 弧線會以順時針方向繪製，從 0 度到 180 度，而且會自動關閉：

Screenshot of a filled teal arc.

在FillColor叫用 方法之前FillArc，物件的屬性ICanvas必須設定為 Color 。

注意

DrawArc有和 FillArc 多載會採用 Rect 和 RectF 自變數。

繪製路徑

路徑是一或多個 輪廓的集合。 每個輪廓都是連接的直線和曲線的集合。 輪廓不會彼此連接，但可能會以視覺方式重疊。 有時候單一輪廓可以重迭本身。

路徑是用來繪製曲線和複雜圖形，而且可以使用 方法繪製ICanvasDrawPath，這需要PathF自變數。

輪廓通常以方法的呼叫PathF.MoveTo開始，您可以以值或個別x和y座標表示PointF。 呼叫 MoveTo 會在輪廓的開頭和初始目前點建立點。 然後，您可以呼叫下列方法，以從目前點到方法中指定的點繼續線條或曲線，然後變成新的目前點：

  • LineTo 表示將直線新增至路徑。
  • AddArc 表示加入弧線，這是圓圈或橢圓形周長上的線條。
  • CurveTo 以加入立方貝氏曲線。
  • QuadTo 表示加入二次方貝塞爾曲線。

這些方法都不包含描述線條或曲線所需的所有數據。 相反地，每個方法都會與方法呼叫緊接在它之前所建立的目前點搭配運作。 例如， LineTo 方法會根據目前的點，將直線新增至輪廓。

輪廓結尾是另一個 呼叫 MoveTo，其會開始新的輪廓，或呼叫 Close，這會關閉輪廓。 方法 Close 會自動將直線從目前點附加至輪廓的第一個點，並將路徑標示為封閉。

類別 PathF 也會定義其他方法和屬性。 下列方法會將整個輪廓新增至路徑：

下列範例示範如何繪製路徑：

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);

在此範例中，會繪製封閉的綠色三角形：

Screenshot of a closed green triangle.

您可以使用 繪製 FillPath填滿路徑，這也需要 PathF 自變數：

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

在此範例中，會繪製填滿的石板藍色三角形：

Screenshot of a filled slate blue triangle.

在FillColor叫用 方法之前FillPath，物件的屬性ICanvas必須設定為 Color 。

重要

FillPath方法具有可指定 的多載WindingMode，可設定所使用的填滿演算法。 如需詳細資訊，請參閱 纏繞模式。

繪製影像

您可以使用 方法繪製ICanvasDrawImage影像，此方法需要 IImage 自變數和 x型float別為 的 、 ywidth、 和 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);
}

在此範例中，會從元件擷取映像，並載入為數據流。 然後，它以實際大小繪製在 （10,10）：

Screenshot of an image.

重要

載入內嵌在元件中的映射時，映像必須將其建置動作設定為 內嵌資源 ，而不是 MauiImage。

繪製字串

您可以使用其中DrawString一個多載來ICanvas繪製字串。 您可以藉由設定 Font、 FontColor和 FontSize 屬性來定義每個字串的外觀。 字串對齊可以透過水準和垂直對齊選項來指定，以在字串周框方塊內執行對齊。

注意

字串的周框方塊是由其 x、 y、 width和 height 自變數所定義。

下列範例示範如何繪製字串：

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);

在這裡範例中，會顯示具有不同外觀和對齊選項的字串：

Screenshot of strings using different alignment options.

注意

多 DrawString 載也可指定截斷和行距。

如需繪製陰影的相關信息，請參閱 繪製陰影。

繪製屬性化文字

您可以使用 DrawText 方法在 上ICanvas繪製屬性化文字，這需要 IAttributedText 型別的 float自變數和 x、 ywidth、 和 height 自變數。 屬性化文字是一個字串，具有其文字部分的相關屬性，通常代表樣式數據。

下列範例示範如何繪製屬性化文字：

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);

在此範例中，Markdown 會轉換成屬性化文字，並以正確的樣式顯示：

Screenshot of correctly rendered markdown.

重要

繪圖屬性化文字需要您已將 NuGet 套件新增 Microsoft.Maui.Graphics.Text.Markdig 至專案。

使用填滿和筆劃繪製

在填滿方法之後呼叫繪製方法，即可將填滿和筆劃同時繪製至畫布的圖形物件。 例如，若要繪製外框，請將 和屬性設定FillColor為色彩，然後呼叫 FillRectangle 方法，DrawRectangle後面接著 StrokeColor 方法。

下列範例會繪製以筆劃外框為路徑的填滿圓形：

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);

在此範例中，會指定 物件的筆劃和填滿色彩 PathF 。 繪製填滿的圓形，然後繪製圓形的外框筆劃：

Screenshot of a circle drawn with fill and stroke.

警告

在填滿方法之前呼叫繪製方法會導致迭置順序不正確。 填滿會在筆劃上繪製，而且不會顯示筆劃。

繪製陰影

在上 ICanvas 繪製的圖形物件可以使用 方法套用 SetShadow 陰影，這會採用下列自變數：

  • offset類型 SizeF為 的 ，指定陰影的位移，代表建立陰影的光源位置。
  • blur型 float別為 的 ，表示要套用至陰影的模糊量。
  • color型 Color別為 的 ，會定義陰影的色彩。

下列範例示範如何將陰影新增至填滿的物件：

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);

在這些範例中，光線來源位於不同位置的陰影會新增至填滿的物件，其模糊量相同：

Screenshot of a objects drawn with shadows.

繪製虛線物件

ICanvas 物件具有 StrokeDashPattern 類型的 float[]屬性。 這個屬性是值陣列 float ，表示繪製物件筆劃時要使用的虛線和間距圖樣。 float陣列中的每個都會指定虛線或間距的長度。 陣列中的第一個專案會指定虛線的長度，而陣列中的第二個專案則指定間距的長度。 因此， float 具有偶數索引值的值會指定破折號，而 float 具有奇數索引值的值則指定間距。

下列範例示範如何使用一般破折號繪製虛線方形：

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

在此範例中，繪製具有一般虛線筆劃的正方形：

Screenshot of a regular dashed square.

下列範例示範如何使用不規則的破折號繪製虛線方塊：

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

在此範例中，繪製具有不規則虛線筆劃的正方形：

Screenshot of an irregular dashed square.

控制線結尾

線條有三個部分：開始上限、線條主體和結尾上限。 開始和結束端點描述線條的開始和結尾。

ICanvas 物件具有 StrokeLineCap 類型的 LineCap屬性，描述線條的開頭和結尾。 LineCap 列舉會定義下列成員：

  • Butt，表示具有正方形的線條，繪製以延伸至該行的確切端點。 此為 StrokeLineCap 屬性的預設值。
  • Round，表示具有四捨五入結尾的線條。
  • Square，表示具有正方形的線條，繪製以延伸至端點以外的距離等於線條寬度的一半。

下列範例示範如何設定 StrokeLineCap 屬性：

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

在此範例中，紅色線條會在行的開頭和結尾四捨五入：

Screenshot of three lines with different line caps.

控制行聯結

ICanvas 物件具有 StrokeLineJoin 類型的 LineJoin屬性，指定物件頂點所使用的聯結類型。 LineJoin 列舉會定義下列成員：

  • Miter，表示產生尖銳或裁剪邊角的角頂點。 此為 StrokeLineJoin 屬性的預設值。
  • Round，表示在角落產生圓弧線的圓角頂點。
  • Bevel，表示產生對角角角的斜面頂點。

注意

StrokeLineJoin當屬性設定為 Miter時，MiterLimit屬性可以設定為 float ，以限制 物件中行聯結的誤點長度。

下列範例示範如何設定 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);

在此範例中，藍色 PathF 物件在其頂點上已四捨五入聯結：

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

Clip 物件

繪製至 ICanvas 的圖形物件可以在繪圖之前裁剪，並採用下列方法：

  • ClipPath 裁剪 物件，以便只顯示物件區域內的區域 PathF 。
  • ClipRectangle 裁剪 物件，以便只顯示矩形區域內的區域。 您可以使用自變數或 Rect 或 RectF 自變數來指定float矩形。
  • SubtractFromClip 裁剪 物件，以便只顯示矩形區域以外的區域。 您可以使用自變數或 Rect 或 RectF 自變數來指定float矩形。

下列範例示範如何使用 ClipPath 方法來裁剪影像：

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);
}

在此範例中，影像會使用 PathF 物件來裁剪，該物件會定義以80半徑為100,90的圓圈置中。 結果是只有圓形內影像的一部分可見：

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

重要

ClipPath方法具有可指定 的多載WindingMode，可設定裁剪時所使用的填滿演算法。 如需詳細資訊，請參閱 纏繞模式。

下列範例示範如何使用 SubtractFromClip 方法來裁剪影像：

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);
}

在此範例中，由提供給 SubtractFromClip 方法的自變數所指定的矩形所定義的區域會從影像剪下。 結果是只有矩形外部影像的部分可見：

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