2025年12月13日 用SkiaSharp.TimeLine生成时间轴或时间线图片流的使用方法

组装要显示的数据

/// <summary>
/// 组装要显示的数据
/// </summary>
/// <returns></returns>
private List<TimeLineData> BuildDatas()
{
    return new List<TimeLineData>
    {
        new TimeLineData { Index = 1, Title = "1949年", Description = "中华人民共和国成立" },
        new TimeLineData { Index = 2, Title = "1971年", Description = "恢复联合国合法席位" },
        new TimeLineData { Index = 3, Title = "1997年", Description = "香港回归祖国" },
        new TimeLineData { Index = 4, Title = "1999年", Description = "澳门回归祖国" },
        new TimeLineData { Index = 5, Title = "2001年", Description = "加入世界贸易组织" },
        new TimeLineData { Index = 6, Title = "2021年", Description = "中国gcd成立 100 周年" },
        new TimeLineData { Index = 7, Title = "2022年", Description = "党的二十大召开" },
        new TimeLineData { Index = 8, Title = "2023年", Description = "C919 大型客机完成首个商业航班飞行" },
        new TimeLineData { Index = 9, Title = "2024年", Description = "嫦娥六号任务发射" },
        new TimeLineData { Index = 10, Title = "2025年", Description = "世界反法西斯战争胜利 80 周年" },
        new TimeLineData { Index = 11, Title = "2026年", Description = "中国全固态电池装车" }
    };
}

背景图片信息

//背景图片信息
var imageInfo = new ImageInfo
    {
        ImageWidth = 1000,//图片宽度
        ImageHeight = 1000,//图片高度
        Color = SKColors.White,//图片颜色
        ImageFormat = SKEncodedImageFormat.Png,//图片格式
    }

线条信息

//线条信息
var lineInfo = new LineInfo
    {
        LineSectionLength = 100,//线段长度
        StartPoint = new SKPoint(50, 200),//线条的起始点
        Color = SKColors.Black,//线条颜色
        Width = 3,//线条宽度
        TitleColor = SKColors.Gray,//标题颜色
        TitleFont = new SKFont(SKTypeface.FromFamilyName("Microsoft YaHei"), 14),//标题字体
        DescColor = SKColors.Blue,//描述颜色
        DescFont = new SKFont(SKTypeface.FromFamilyName("Microsoft YaHei"), 14),//描述字体
        Direction = LineDirection.Right//线条方向
    }

圆圈信息

//圆圈信息
var circleInfo = new CircleInfo
    {
        Radius = 10,//圆圈半径
        Color = SKColors.Black,//圆圈颜色
        PaintStyle = SKPaintStyle.Stroke//圆圈画笔风格
    }

生成时间轴图片流

//生成时间轴图片流
var timeLineStream = TimeLineUtility.PaintLine(BuildDatas(),imageInfo,lineInfo,circleInfo)

注意事项

1.设置好线条的起始位置，否则部分时间线有可能在图片外
2.标题与描述的文字多少（长度）要与线段的长度相匹配，否则相邻2个节点的文字可能重叠
3.设置好图片的大小，保证线条总长度小于图片大小 ，否则部分时间线有可能在图片外