.net 如何在NET Maui应用程序上绘制渐变路径？

dluptydi 于 2023-08-08 发布在 .NET

关注(0)|答案(1)|浏览(129)

看看MAUI创建者创建的GraphicsView示例：
https://github.com/dotnet/maui-samples/tree/main/7.0/UserInterface/Views/GraphicsViewDemos
你可以找到一些GraphicsView的例子，特别是一个例子，展示了如何绘制一个矩形与梯度（垂直，水平等）。

internal class VerticalLinearGradientPaintDrawable : IDrawable
{
    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        LinearGradientPaint linearGradientPaint = new LinearGradientPaint
        {
            StartColor = Colors.Yellow,
            EndColor = Colors.Green,
            // StartPoint is already (0,0)
            EndPoint = new Point(0, 1)
        };

        RectF linearRectangle = new RectF(10, 10, 200, 100);
        canvas.SetFillPaint(linearGradientPaint, linearRectangle);
        canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
        canvas.FillRoundedRectangle(linearRectangle, 12);
    }
}

字符串
但是如何为特定的路径（或多边形区域）绘制路径？我找不到路。

谢谢-谢谢
我试图找到一种方法来画一个多边形的梯度，但还没有找到这样做的方法。

.net

来源：https://stackoverflow.com/questions/76738037/how-to-draw-a-path-with-gradient-on-net-maui-app

1条答案

按热度按时间

oxiaedzo1#

更新：

在后面的代码中定义：

public MainPage()
{
    InitializeComponent();

    Polygon polygon = new Polygon() { WidthRequest=70,HeightRequest=80,Stroke=Colors.Transparent};
    PointCollection points = new PointCollection();
    points.Add(new Point(0, 0));
    points.Add(new Point(40, 10));
    points.Add(new Point(70, 80));
    points.Add(new Point(10, 50));
    polygon.Points = points;

    GradientStopCollection gradientStops = new GradientStopCollection();
    gradientStops.Add(new GradientStop(color: Colors.Yellow, offset: 0));
    gradientStops.Add(new GradientStop(color: Colors.Green, offset: 1));
    LinearGradientBrush linearGradientBrush = new LinearGradientBrush(gradientStops,startPoint:new Point(0,0),endPoint:new Point(1,0));
    
    polygon.Fill = linearGradientBrush;

    mystack.Children.Add(polygon);

字符串
您可以尝试使用Linear gradient brushes和Polygon。请考虑下列程式码：

<StackLayout BackgroundColor="AliceBlue">
    <Polygon Points="0,0 40,10 70,80 10,50"
         Stroke="Transparent"
         StrokeThickness="5" >
            <Polygon.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="Yellow" Offset="0" />                  
                    <GradientStop Color="Green" Offset="1" />
                </LinearGradientBrush>
            </Polygon.Fill>
    </Polygon>
</StackLayout>

型

垂直线性梯度结果（终点=“0，1”）：

的数据