WPF实现径向渐变的圆环

最近制作工业流程图,需要绘制管道。直线形的管道就不必说,可以用线性渐变画刷LinearGradientBrush来实现,大概就是这样的效果——
在这里插入图片描述
这里主要介绍弯管的渐变效果画法。
首先上一张成品图:
在这里插入图片描述
由于没有现成的沿弯曲路径渐变的画刷,因此只能依靠另一个东西——RadialGradientBrush来实现。
具体思路就是,由弧的圆心开始向外多个梯度渐变。以下介绍一种简单画法:
先画一个渐变圆环,用Ellipse图形控件(当然用Path也可以,看心情)。
假设我们的UserControl大小是50*50,那么圆的直径就是100,做如下绘制:

<Ellipse Width="100" Height="100"></Ellipse>

接下来用RadialGradientBrush进行渐变填充,假设管道厚度是25,即圆半径的二分之一,那么我们渐变的起始断点应该是0.5,从0.5->0.75->0.1,渐变颜色分别是DimGray->Snow->DimGray。

<Ellipse Width="100" Height="100">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.5,0.5">
                    <GradientStop Color="DimGray" Offset="0.5"/>
                    <GradientStop Color="Snow" Offset="0.75"/>
                    <GradientStop Color="DimGray" Offset="1"/>
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>

这样画出来的效果大概是这样的
在这里插入图片描述
但我们需要中间是空的,那就让0->0.5用Transparent渐变

<Ellipse Width="100" Height="100">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.5,0.5">
                    <GradientStop Color="Transparent" Offset="0"/>
                    <GradientStop Color="Transparent" Offset="0.5"/>
                    <GradientStop Color="DimGray" Offset="0.5"/>
                    <GradientStop Color="Snow" Offset="0.75"/>
                    <GradientStop Color="DimGray" Offset="1"/>
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>

这样就完美了!
在这里插入图片描述
如果需要得到不同方位的弧,可以通过调整Margin来实现,这里就不多说了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值