SkiaSharp实战：5分钟搞定跨平台图表生成（支持导出PDF/SVG，含自动换行文本库推荐）

SkiaSharp实战：5分钟搞定跨平台图表生成（支持导出PDF/SVG，含自动换行文本库推荐）

在业务系统开发中，动态生成可视化图表是一个高频需求。无论是销售报表、运营数据看板，还是实时监控仪表盘，都需要后端或桌面应用能够快速生成专业级图表。传统方案往往依赖第三方图表库或前端渲染，而SkiaSharp作为Google Skia图形库的.NET封装，提供了从绘图到导出的全链路解决方案。本文将手把手带你用C#实现跨平台图表生成，涵盖柱状图、折线图等基础图表绘制，并重点解决导出PDF/SVG和文本自动换行两大核心痛点。

1. 环境准备与基础绘图

1.1 快速创建SkiaSharp项目

通过NuGet安装核心库（以Windows Forms为例）：

Install-Package SkiaSharp -Version 2.88.3 Install-Package SkiaSharp.Views.WindowsForms Install-Package SkiaSharp.Extended

基础绘图代码框架：

private void skControl1_PaintSurface(object sender, SKPaintSurfaceEventArgs e) { var canvas = e.Surface.Canvas; canvas.Clear(SKColors.White); // 清空画布 // 创建画笔样式 var paint = new SKPaint { Style = SKPaintStyle.Fill, Color = SKColors.Blue, IsAntialias = true // 开启抗锯齿 }; // 绘制矩形（柱状图基础元素） canvas.DrawRect(50, 200, 100, 150, paint); }

1.2 核心绘图对象解析

SkiaSharp的核心绘图元素包括：

提示：所有绘图操作应在PaintSurface事件中完成，确保画面刷新时自动重绘

2. 商业图表实战开发

2.1 柱状图生成方案

完整柱状图实现代码示例：

void DrawBarChart(SKCanvas canvas, float[] data) { float barWidth = 40f; float startX = 50f; float baseY = 300f; // 绘制坐标轴 var axisPaint = new SKPaint { Color = SKColors.Black, StrokeWidth = 2 }; canvas.DrawLine(startX, 50, startX, baseY, axisPaint); canvas.DrawLine(startX, baseY, startX + 500, baseY, axisPaint); // 绘制数据柱 for (int i = 0; i < data.Length; i++) { var height = data[i] * 2; var rect = SKRect.Create( x: startX + (i * (barWidth + 20)), y: baseY - height, width: barWidth, height: height); canvas.DrawRect(rect, new SKPaint { Color = SKColor.Parse("#3498db"), Style = SKPaintStyle.Fill }); } }

2.2 折线图实现技巧

折线图关键实现逻辑：

1. 计算数据点坐标
2. 创建SKPath连接各点
3. 添加数据标记点

void DrawLineChart(SKCanvas canvas, float[] data) { var path = new SKPath(); path.MoveTo(50, baseY - data[0] * 2); for (int i = 1; i < data.Length; i++) { path.LineTo(50 + i * 60, baseY - data[i] * 2); } canvas.DrawPath(path, new SKPaint { Color = SKColors.Red, StrokeWidth = 3, Style = SKPaintStyle.Stroke }); // 绘制数据点 foreach (var point in path.Points) { canvas.DrawCircle(point, 5, new SKPaint { Color = SKColors.White, StrokeWidth = 2 }); } }

3. 多格式导出实战

3.1 PDF导出方案

创建PDF画布并导出：

void ExportToPdf(string filePath, int width, int height) { using var stream = new SKFileWStream(filePath); using var document = SKDocument.CreatePdf(stream); // 开始新页面 var canvas = document.BeginPage(width, height); // 在此canvas上绘制内容 DrawBarChart(canvas, new[] { 45f, 76f, 92f }); document.EndPage(); document.Close(); }

3.2 SVG导出与矢量处理

SVG导出特有的优势：

• 无限缩放不失真
• 可直接用文本编辑器修改
• 兼容现代浏览器

void ExportToSvg(string filePath, int width, int height) { using var stream = new SKFileWStream(filePath); using var canvas = SKSvgCanvas.Create(SKRect.Create(width, height), stream); DrawLineChart(canvas, new[] { 30f, 45f, 28f, 60f }); }

3.3 位图导出性能优化

对于高频生成的场景，建议使用内存流：

byte[] ExportToPng(int width, int height) { using var bitmap = new SKBitmap(width, height); using var canvas = new SKCanvas(bitmap); DrawBarChart(canvas, GetChartData()); using var image = SKImage.FromBitmap(bitmap); using var data = image.Encode(SKEncodedImageFormat.Png, 100); using var ms = new MemoryStream(); data.SaveTo(ms); return ms.ToArray(); }

4. 文本处理高级技巧

4.1 自动换行解决方案

集成SkiaTextRenderer库处理长文本：

Install-Package SkiaTextRenderer

实际应用示例：

void DrawWrappedText(SKCanvas canvas, string text, SKRect bounds) { var textRenderer = new TextBlockRenderer { MaxWidth = bounds.Width, TextAlign = TextAlignment.Left, Font = new Font { Size = 14, FamilyName = "Microsoft YaHei" } }; textRenderer.AddText(text); textRenderer.Render(canvas, bounds.Left, bounds.Top); }

4.2 多语言文本处理要点

• 中文字体必须显式指定（如"SimSun"、"Microsoft YaHei"）
• 混合语言文本建议统一使用支持Unicode的字体
• 文字测量使用SKPaint.MeasureText

float MeasureText(string text, SKPaint paint) { var bounds = new SKRect(); paint.MeasureText(text, ref bounds); return bounds.Width; }

5. 性能优化与实战建议

5.1 对象复用策略

高频绘图场景应避免频繁创建对象：

// 推荐：类级别缓存常用对象 private readonly SKPaint _axisPaint = new SKPaint { Color = SKColors.Black, StrokeWidth = 2, IsAntialias = true }; // 在绘图方法中直接复用 canvas.DrawLine(0, 0, 100, 100, _axisPaint);

5.2 复杂图表优化方案

当数据量较大时：

1. 使用SKPicture录制绘图操作
2. 开启硬件加速（通过GRContext）
3. 分块渲染大数据集

var recorder = new SKPictureRecorder(); var recordingCanvas = recorder.BeginRecording(SKRect.Create(800, 600)); // 执行绘图操作 DrawComplexChart(recordingCanvas); var picture = recorder.EndRecording(); canvas.DrawPicture(picture); // 高效重放

5.3 跨平台兼容性验证

在不同平台需特别注意：

• Linux环境需安装libSkiaSharp本地依赖
• WebAssembly需配置<TrimmerRootAssembly>
• iOS/Android注意权限申请

测试矩阵示例：