C# SkiaSharp

最后修改于 2023 年 7 月 5 日

在本文中，我们将展示如何使用 SkiaSharp 库在 C# 中创建简单的 2D 图形。

Skia 是一个开源 2D 图形库，可在多个硬件和软件平台上运行。 Skia 用于 Chrome、Android、Flutter、LibreOffice、Avalonia UI 或 QuestPDF。该库是用 C++ 编写的。

SkiaSharp 为 Skia 库提供 .NET 绑定。

SkiaSharp 点

在第一个例子中，我们绘制点。

Program.cs

using SkiaSharp;

SKBitmap bmp = new(640, 480);
using SKCanvas canvas = new(bmp);
canvas.Clear(SKColor.Parse("#003366"));

Random rand = new(0);
SKPaint p1 = new() { Color = SKColors.FloralWhite };

for (int i = 0; i < 10000; i++)
{
    SKPoint pot = new(rand.Next(bmp.Width), rand.Next(bmp.Height));
    canvas.DrawPoint(pot, p1);
}

SKFileWStream fs = new("points.jpg");
bmp.Encode(fs, SKEncodedImageFormat.Jpeg, quality: 100);

在该程序中，我们在画布上随机绘制 10000 个点。绘图保存为 JPEG 图像。

using SKBitmap bmp = new(640, 480);
using SKCanvas canvas = new(bmp);
canvas.Clear(SKColor.Parse("#003366"));

我们创建一个位图并用一些蓝色填充它。

using SKPaint p1 = new() { Color = SKColors.FloralWhite };

SKPaint 包含有关如何绘制几何图形、文本和位图的样式和颜色信息。

for (int i = 0; i < 10000; i++)
{
    SKPoint pot = new(rand.Next(bmp.Width), rand.Next(bmp.Height));
    canvas.DrawPoint(pot, p1);
}

在一个 for 循环中，我们创建数千个点并使用 DrawPoint 将它们绘制在画布上。这些点在画布的边界内具有随机坐标。

SKFileWStream fs = new("points.jpg");
bmp.Encode(fs, SKEncodedImageFormat.Jpeg, quality: 100);

我们将位图保存到文件中。

SkiaSharp 线

线是用 DrawLine 绘制的。

Program.cs

using SkiaSharp;

using SKBitmap bmp = new(640, 480);
using SKCanvas canvas = new(bmp);
canvas.Clear(SKColor.Parse("#003366"));

using SKPaint p1 = new() { Color = SKColors.FloralWhite, StrokeWidth = 1 };
using SKPaint p2 = new() { Color = SKColors.DarkSeaGreen, StrokeWidth = 2 };
using SKPaint p3 = new() { Color = SKColors.AliceBlue, StrokeWidth = 3 };

canvas.DrawLine(50, 50, 250, 50, p1);
canvas.DrawLine(50, 150, 350, 150, p2);
canvas.DrawLine(50, 250, 450, 250, p3);

using SKFileWStream fs = new("lines.jpg");
bmp.Encode(fs, SKEncodedImageFormat.Jpeg, quality: 100);

在该程序中，我们在画布上绘制三条水平线。

using SKPaint p1 = new() { Color = SKColors.FloralWhite, StrokeWidth = 1 };
using SKPaint p2 = new() { Color = SKColors.DarkSeaGreen, StrokeWidth = 2 };
using SKPaint p3 = new() { Color = SKColors.AliceBlue, StrokeWidth = 3 };

对于这些线，我们定义了三个 SKPaint 对象。它们具有不同的颜色和笔触宽度。

canvas.DrawLine(50, 50, 250, 50, p1);
canvas.DrawLine(50, 150, 350, 150, p2);
canvas.DrawLine(50, 250, 450, 250, p3);

绘制三条线。 DrawLine 的参数是两个端点的 x 和 y 坐标以及 SKPaint。

SkiaSharp 矩形

可以使用 DrawRect 和 DrawRoundRect 创建矩形。

Program.cs

using SkiaSharp;

using SKBitmap bmp = new(640, 480);
using SKCanvas canvas = new(bmp);
canvas.Clear(SKColor.Parse("#003366"));

using SKPaint p1 = new() { Color = SKColors.White.WithAlpha(30) };
canvas.DrawRect(50, 50, 100, 100, p1);

using SKPaint p2 = new() { Color = SKColors.SlateGray, IsAntialias = true };
canvas.DrawRoundRect(250, 150, 100, 100, 10, 10, p2);

using SKFileWStream fs = new("rectangles.png");
bmp.Encode(fs, SKEncodedImageFormat.Png, 100);

在该程序中，我们创建一个常规矩形和一个带有圆角的矩形。

using SKPaint p1 = new() { Color = SKColors.White.WithAlpha(30) };

矩形填充具有 alpha 值集；它是部分透明的。

canvas.DrawRect(50, 50, 100, 100, p1);

我们绘制矩形。前四个参数是左上角的 x 和 y 坐标以及矩形的宽度和高度。

using SKPaint p2 = new() { Color = SKColors.SlateGray, IsAntialias = true };

在这里我们绘制一个圆角矩形。该绘画使用抗锯齿技术；这使得圆角看起来更平滑。

canvas.DrawRoundRect(250, 150, 100, 100, 10, 10, p2);

DrawRoundRect 的第五个和第六个参数是用于圆角的椭圆的 x 和 y 半径。

SkiaSharp 圆

圆是用 DrawCircle 绘制的。

Program.cs

using SkiaSharp;

using SKBitmap bmp = new(640, 480);
using SKCanvas canvas = new(bmp);
canvas.Clear(SKColor.Parse("#003366"));

using SKPaint p1 = new() { Color = SKColors.White, IsAntialias = true };
using SKPaint p2 = new() { Color = SKColors.AntiqueWhite };

canvas.DrawCircle(80, 80, 60, p1);
canvas.DrawCircle(250, 210, 100, p2);

using SKFileWStream fs = new("circles.png");
bmp.Encode(fs, SKEncodedImageFormat.Png, 100);

在该程序中，我们绘制两个圆。

canvas.DrawCircle(80, 80, 60, p1);

DrawCircle 的参数是中心点的 x 和 y 坐标、半径和画笔。

SkiaSharp 贝塞尔曲线

贝塞尔曲线是一条三次线。可以使用 SKPath 创建它。 SKPath 是一个复合几何路径。它封装了由直线段、二次曲线和三次曲线组成的复合几何路径。

Program.cs

using SkiaSharp;

using SKBitmap bmp = new(350, 350);
using SKCanvas canvas = new(bmp);
canvas.Clear(SKColor.Parse("#003366"));

using SKPaint p1 = new() { IsAntialias = true, Color = SKColors.White, Style = SKPaintStyle.Stroke };

p1.StrokeWidth = 8;
p1.StrokeCap = SKStrokeCap.Round;

using SKPath path = new();
path.MoveTo(10, 10);
path.QuadTo(256, 64, 128, 128);
path.QuadTo(10, 192, 250, 250);

canvas.DrawPath(path, p1);

using SKFileWStream fs = new("bezier.png");
bmp.Encode(fs, SKEncodedImageFormat.Png, 100);

在该程序中，我们绘制一条贝塞尔曲线。

p1.StrokeWidth = 8;
p1.StrokeCap = SKStrokeCap.Round;

该线的宽度为 8 个单位，并且其笔触端点是圆形的。

using SKPath path = new();
path.MoveTo(10, 10);
path.QuadTo(256, 64, 128, 128);
path.QuadTo(10, 192, 250, 250);

创建了一个 SKPath。我们首先使用 MoveTo 移动到起点。然后，我们使用 QuadTo 创建两条三次线。

canvas.DrawPath(path, p1);

生成的路径使用 DrawPath 绘制到画布上。

来源

SkiaSharp Github 页面

在本文中，我们使用 SkiaSharp 库在 C# 中创建了 2D 图形。

作者

我叫 Jan Bodnar，是一位充满热情的程序员，拥有丰富的编程经验。我自 2007 年以来一直在撰写编程文章。迄今为止，我已经撰写了 1,400 多篇文章和 8 本电子书。我拥有超过十年的编程教学经验。

列出所有 C# 教程。