如何为圆形形状提供渐变颜色 [英] How to provide gradient color for circular shapes

问题描述

我正在使用路径形状创建圆环圈，并可以为圆圈添加实心画笔，如下所示 

但我必须在此圈子中添加渐变画笔，如下图所示。 

我如何达到这个要求在uwp开发中？我的代码低于 

< Grid Background =" {ThemeResource ApplicationPageBackgroundThemeBrush}"> 
< Path Height =" 500"宽度= QUOT; 800"填充= QUOT;红色"的Horizo​​ntalAlignment = QUOT;中心" VerticalAlignment = QUOT;中心"> 
< Path.Data> 
< GeometryGroup> 
< EllipseGeometry Center =" 370,258"半径X = QUOT; 206.39999389648438"半径Y = QUOT; 206.39999389648438" /> 
< EllipseGeometry Center =" 370,258"半径X = QUOT; 123.83999633789063"半径Y = QUOT; 123.83999633789063" /> 
< / GeometryGroup> 
< /Path.Data> 
< / Path> 
< / Grid> 

解决方案

< blockquote>

你好，Sheik Syed Abuthaheer，

你可以试试添加

LinearGradientBrush 圆圈代码如下：

< Path Height =" 500"宽度= QUOT; 800"的Horizo​​ntalAlignment = QUOT;中心" VerticalAlignment = QUOT;中心"> 
< Path.Data> 
< GeometryGroup> 
< EllipseGeometry Center =" 370,258"半径X = QUOT; 206.39999389648438"半径Y = QUOT; 206.39999389648438" /> 
< EllipseGeometry Center =" 370,258"半径X = QUOT; 123.83999633789063"半径Y = QUOT; 123.83999633789063" /> 
< / GeometryGroup> 
< /Path.Data> 
< Path.Fill> 
< LinearGradientBrush StartPoint =" 0,0" EndPoint ="1,1"> 
< GradientStop Offset =" 0.2"颜色="红色" /> 
< GradientStop Offset =" 0.8"颜色="蓝色" /> 
< / LinearGradientBrush> 
< /Path.Fill> 
< / Path> 

在其他手，  如果你想在截图中实现效果，我建议你创建两个半圆形，
然后将每个圆圈设置为
LinearGradientBrush 。我使用笔画和数据来制作样本。您可以参考下面的代码并更改一些代码以满足您的要求。

< Grid Background =" {ThemeResource ApplicationPageBackgroundThemeBrush}"> ; 
< Path Data =" M300,350a200,200 0 1,0 400,0a200,200 0 1,0 0,0" StrokeThickness = QUOT; 100" RenderTransformOrigin = QUOT; 0.5,0.5"> 
<！ - 您可以更改此角度以满足您的要求 - > 
< Path.RenderTransform> 
< RotateTransform Angle =" 29.9" /> 
< /Path.RenderTransform> 
< Path.Stroke> 
< LinearGradientBrush StartPoint =" 0,0.5" EndPoint ="1,0.5"> 
< GradientStop Offset =" 0"颜色="红色" /> 
< GradientStop Offset =" 0.8"颜色="紫色" /> 
< / LinearGradientBrush> 
< /Path.Stroke> 
< / Path> 
< Path Data =" M300,350a200,200 0 0,1 400,0a200,200 0 1,0 0,0" StrokeThickness = QUOT; 100" RenderTransformOrigin = QUOT; 0.5,0.5"> 
<！ - 您可以更改此角度以满足您的要求 - > 
< Path.RenderTransform> 
< RotateTransform Angle =" 30.1" /> 
< /Path.RenderTransform> 
< Path.Stroke> 
< LinearGradientBrush StartPoint =" 0,0.5" EndPoint ="1,0.5"> 
< GradientStop Offset =" 0"颜色="蓝色" /> 
< GradientStop Offset =" 0.8"颜色="紫色" /> 
< / LinearGradientBrush> 
< /Path.Stroke> 
< / Path> 
< / Grid> 

祝你好运，

Breeze

I'm creating doughnut circle using path shapes and can add solid brush for circle as like below 

But i have to add gradient brush in this circle as similar like below image. 

How can i achieve this requirement in uwp development? My code is below 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Path Height="500" Width="800" Fill="Red" HorizontalAlignment="Center" VerticalAlignment="Center">
           <Path.Data>
                <GeometryGroup>
                    <EllipseGeometry Center="370,258" RadiusX="206.39999389648438" RadiusY="206.39999389648438"/>
                    <EllipseGeometry Center="370,258" RadiusX="123.83999633789063" RadiusY="123.83999633789063"/>
                </GeometryGroup>
            </Path.Data>
        </Path>
 </Grid>

解决方案

Hi Sheik Syed Abuthaheer,

You can try to add LinearGradientBrush to the circle as the code below:

        <Path Height="500" Width="800" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Path.Data>
                <GeometryGroup>
                    <EllipseGeometry Center="370,258" RadiusX="206.39999389648438" RadiusY="206.39999389648438"/>
                    <EllipseGeometry Center="370,258" RadiusX="123.83999633789063" RadiusY="123.83999633789063"/>
                </GeometryGroup>
            </Path.Data>
            <Path.Fill>
                <LinearGradientBrush StartPoint="0, 0" EndPoint="1, 1">
                    <GradientStop Offset="0.2" Color="Red"/>
                    <GradientStop Offset="0.8" Color="Blue"/>
                </LinearGradientBrush>
            </Path.Fill>
        </Path>

On other hand, if you want to achieve the effect in the screenshot, I recommend you to create two semi-circles, then set each circle a LinearGradientBrush. I use stroke and data to make a sample. You can refer to the code below and change some code to satisfy your requirement.

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Path Data="M300,350a200,200 0 1,0 400,0a200,200 0 1,0 0,0" StrokeThickness="100" RenderTransformOrigin="0.5,0.5">
            <!--You can change this angle to satisfy your requirement-->
            <Path.RenderTransform>
                <RotateTransform Angle="29.9"/>
            </Path.RenderTransform>
            <Path.Stroke>
                <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1, 0.5">
                    <GradientStop Offset="0" Color="Red" />
                    <GradientStop Offset="0.8" Color="Purple"/>
                </LinearGradientBrush>
            </Path.Stroke>
        </Path>
        <Path Data="M300,350a200,200 0 0,1 400,0a200,200 0 1,0 0,0" StrokeThickness="100" RenderTransformOrigin="0.5,0.5">
            <!--You can change this angle to satisfy your requirement-->
            <Path.RenderTransform>
                <RotateTransform Angle="30.1"/>
            </Path.RenderTransform>
            <Path.Stroke>
                <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1, 0.5">
                    <GradientStop Offset="0" Color="Blue" />
                    <GradientStop Offset="0.8" Color="Purple"/>
                </LinearGradientBrush>
            </Path.Stroke>
        </Path>
    </Grid>

Best regards,

Breeze

这篇关于如何为圆形形状提供渐变颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！