.NET MAUI应用中如何绘制带渐变效果的路径？

官方示例里的渐变填充针对矩形场景，但自定义路径/多边形的实现逻辑其实一致，核心是利用ICanvas.SetFillPaint()方法将渐变画笔与目标区域关联，再填充路径即可。

实现步骤与代码示例 #

以下是为三角形多边形添加对角线线性渐变的完整实现：

internal class PolygonGradientDrawable : IDrawable
{
    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        // 创建线性渐变画笔，设置起止颜色与渐变方向
        var linearGradient = new LinearGradientPaint
        {
            StartColor = Colors.Blue,
            EndColor = Colors.Purple,
            StartPoint = new Point(0, 0),
            EndPoint = new Point(1, 1) // 从左上角到右下角的对角线渐变
        };

        // 构建自定义多边形路径（这里以三角形为例）
        var polygonPath = new Path();
        polygonPath.MoveTo(50, 50);    // 起点
        polygonPath.LineTo(200, 50);   // 第二个顶点
        polygonPath.LineTo(125, 180);  // 第三个顶点
        polygonPath.Close();           // 闭合路径，确保填充区域完整

        // 将渐变画笔与路径的边界区域绑定
        // 也可以手动指定RectF来控制渐变的映射范围，比如new RectF(0,0,250,200)
        canvas.SetFillPaint(linearGradient, polygonPath.Bounds);

        // 填充路径，渐变会自动应用到路径区域内
        canvas.FillPath(polygonPath);
    }
}

关键说明 #

• SetFillPaint()的第二个参数RectF用于定义渐变的映射范围：渐变会按照这个矩形的坐标比例，映射到后续填充的路径区域中。使用path.Bounds可以让渐变刚好适配路径的大小，也可以手动指定矩形来实现拉伸、偏移等效果。
• 如果使用径向渐变（RadialGradientPaint），用法完全一致，只需要替换渐变画笔的类型即可。
• 路径必须调用Close()闭合，否则填充的渐变区域可能不完整或出现异常。

内容的提问来源于stack exchange，提问作者Pep Jorge