Question

我正在尝试绘制折线图，其中下面的部分充满了渐变。下面是我的代码。

我将背景设为所需的渐变色，但应将其切为多边形以下。

var startPoint = new SKPoint(0, 0);
    var endPoint = new SKPoint(0, 220);

    List<SKColor> colors = new List<SKColor>()
    {
        new SKColor(21, 91, 1 ),
        new SKColor(24, 111, 2 ),
        new SKColor(26, 129, 2 ),
        new SKColor(69, 138, 13 ),
        new SKColor(113, 180, 2 ),
        new SKColor(146, 199, 1 ),
    };
    List<float> colorPoints = new List<float>(){0,.21f,.40f,.59f,.81f,1f};
    
    SKImage image = null;
    using (var surface = SKSurface.Create(new SKImageInfo(867, 220)))
    {
        SKCanvas canvas = surface.Canvas;
        canvas.Clear(new SKColor(Color.Transparent.R, Color.Transparent.G, Color.Transparent.B));
        var shader = SKShader.CreateLinearGradient(
            startPoint,
            endPoint,
            colors.ToArray(),
            colorPoints.ToArray(),
            SKShaderTileMode.Clamp);
        var paint = new SKPaint
        {  
            Shader = shader
        };
        canvas.DrawPaint(paint);
        string s = "0,220 0,112.62 28.9,125.71 57.8,144.05 86.7,172.86 115.6,178.1 144.5,141.43 173.4,83.81 202.3,214.76 231.2,167.62 260.1,157.14 289,193.81 317.9,86.43 346.8,175.48 375.7,115.24 404.6,36.67 433.5,104.76 462.4,36.67 491.3,36.67 520.2,193.81 549.1,62.86 578,159.76 606.9,86.43 635.8,193.81 664.7,165 693.6,220 722.5,99.52 751.4,60.24 780.3,117.86 809.2,180.71 838.1,41.9 838.1,146.67 838.1,99.52 838.1,214.76 838.1,78.57 838.1,60.24 838.1,44.52 838.1,220 ";
        var points = s.Split(new[] { ' ' }, StringSplitOptions.RemoveEmptyEntries)
        .Select(x => {
            string[] p = x.Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
            return new SKPoint(Convert.ToSingle(p[0].Trim()), Convert.ToSingle(p[1].Trim()));
        }).ToArray();

        var polygonPaint = new SKPaint()
        {
            Color = SKColors.Red
        };
        canvas.DrawPoints(SKPointMode.Polygon, points, paint);
        image = surface.Snapshot();
    }

    return image;

结果应与此类似：

SKIA，线条下方的渲染渐变

0 个答案: