LiveCharts2 绘图任务(Paint Tasks)深度解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00099/article/details/148509003

LiveCharts2 绘图任务(Paint Tasks)深度解析

LiveCharts2 Simple, flexible, interactive & powerful charts, maps and gauges for .Net, LiveCharts2 can now practically run everywhere Maui, Uno Platform, Blazor-wasm, WPF, WinForms, Xamarin, Avalonia, WinUI, UWP. 项目地址: https://gitcode.com/gh_mirrors/li/LiveCharts2

什么是绘图任务(Paint Tasks)

在LiveCharts2可视化库中，绘图任务(Paint Tasks)是核心的渲染机制，它负责定义图表中各种元素的视觉呈现方式。类似于WPF或AvaloniaUI中的Brushes类，但专门为图表渲染进行了优化设计。

技术架构解析

LiveCharts2当前官方后端基于SkiaSharp图形库实现。虽然SkiaSharp本身也有Paint对象，但LiveCharts2对其进行了高级封装，主要增强包括：

内置动画支持
更符合前端开发习惯的API设计
针对图表渲染的性能优化

主要绘图类型详解

1. 空绘图(Null Paint)

null是有效的绘图任务值，表示不绘制该视觉元素。

应用场景：当需要隐藏某些图表元素时使用，如隐藏线条系列的数据点标记。

2. 纯色绘图(SolidColorPaint)

最基本的绘图类型，使用单一颜色填充或描边。

new LineSeries<int>
{
    Values = new []{ 4, 2, 8, 5, 3 },
    GeometrySize = 22,
    Fill = new SolidColorPaint(SKColors.Red),  // 红色填充
    Stroke = new SolidColorPaint(SKColors.Blue) { StrokeThickness = 6 },  // 蓝色描边，6像素宽
    GeometryStroke = new SolidColorPaint(SKColors.GreenYellow) { StrokeThickness = 6 }  // 数据点绿色描边
}

关键属性：

StrokeThickness：描边粗细
Color：颜色值

3. 线性渐变(LinearGradientPaint)

创建沿直线方向颜色渐变的视觉效果。

new ColumnSeries<int>
{
    Values = new []{ 3, 7, 2, 9, 4 },
    Stroke = null,
    Fill = new LinearGradientPaint(
        new [] { new SKColor(255, 140, 148), new SKColor(220, 237, 194) },
        new SKPoint(0.5f, 0),  // 渐变起点：X轴中点，Y轴起点
        new SKPoint(0.5f, 1))  // 渐变终点：X轴中点，Y轴终点
}

技术要点：

渐变方向由两个点坐标决定
坐标范围是0到1的相对值
可添加多个颜色节点
默认水平渐变，修改坐标可创建垂直或对角线渐变

4. 径向渐变(RadialGradientPaint)

创建从中心向外辐射的颜色渐变效果。

new PieSeries<int>
{
    Values = new []{ 7 },
    Stroke = null,
    Fill = new RadialGradientPaint(
        new [] { new SKColor(179, 229, 252), new SKColor(1, 87, 155) }),
    Pushout = 10
}

特点：