如何在 WPF 中绘制“软”线（可能使用 LinearGradientBrush）？

Posted 2023-02-22

【中文标题】如何在 WPF 中绘制“软”线（可能使用 LinearGradientBrush）？

【英文标题】：How can I draw a "soft" line in WPF (presumably using a LinearGradientBrush)?

【发布时间】：2010-11-27 14:57:36

【问题描述】：

无论坡度如何，我都在尝试绘制一条边缘柔和的线。

这是我到目前为止的代码：

<Line   HorizontalAlignment="Stretch" VerticalAlignment="Center"
        Stretch="Uniform" StrokeThickness="5" X1="0" Y1="0" X2="1" Y2="0">
    <Shape.Stroke>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="Transparent" Offset="0" />
            <GradientStop Color="Green" Offset="0.5" />
            <GradientStop Color="Transparent" Offset="1" />
        </LinearGradientBrush>
    </Shape.Stroke>
</Line>

这对我来说很有意义，因为线是水平的，而线性渐变是垂直的，边缘是透明的，而线的中间是纯绿色。

结果喜人： 放大后可以看到渐变：http://img225.imageshack.us/img225/5027/horizontalsoftlinezoomeb.png

但是，当线条不再水平时，渐变是基于线条的边界矩形计算的，而不是线条本身的几何形状。结果是一条垂直着色的斜线，而不是垂直于线的渐变：

有谁知道 WPF 如何处理软边缘？我在 Google 或 MSDN 上找不到任何东西，而且我知道有办法以某种方式做到这一点......

【问题讨论】：

好问题。我一直在试图弄清楚如何用这样的线条制作边框。我觉得答案会是相关的。

如果您使用不需要注册/登录的图像主机，您可能会得到更好的响应。

@Peregrine 是的......九年前，当我问这个问题时，没有注册要求（当时 *** 不允许在问题中直接嵌入图像）。如果有人可以查看这些图像，请随时编辑问题以包含嵌入图像而不是超链接。

@Giffyguy 抱歉，没有注意到这个问题的年龄——它刚刚出现在我的提要中，因为最近有人回答了它。

【参考方案1】：

嗯，我不知道这是否适用于你的场景，但你可以简单地使用 LayoutTransform 旋转水平线，渐变就可以了。

<Line   HorizontalAlignment="Stretch" VerticalAlignment="Center"
    Stretch="Uniform" StrokeThickness="5" X1="0" Y1="0" X2="1" Y2="0">
<Shape.Stroke>
    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="Transparent" Offset="0" />
        <GradientStop Color="Green" Offset="0.5" />
        <GradientStop Color="Transparent" Offset="1" />
    </LinearGradientBrush>
</Shape.Stroke>
    <Line.LayoutTransform>
        <RotateTransform Angle="40"/>
    </Line.LayoutTransform>

【讨论】：

嗯，这是一个可以接受的解决方法......我不想这样做，因为这个解决方案有可能会弄乱我的数学坐标系 - 但这似乎是一个很小的代价结果OK就结束。我应该补充一点，我使用的是 RenderTransform，而不是 LayoutTransform。我假设 LayoutTransform 会产生相同的结果，但我还没有测试过。

【参考方案2】：

尝试使用形状而不是线条

<Path Data="M0,0 L25,25 z" Fill="#FFF4F4F5" StrokeThickness="5" Canvas.Left="122" Canvas.Top="58">
<Path.Stroke>
    <LinearGradientBrush EndPoint="1.135,0.994" StartPoint="-0.177,-0.077">
        <GradientStop Color="Black"/>
        <GradientStop Color="#FF68A8FF" Offset="1"/>
    </LinearGradientBrush>
</Path.Stroke>

汤姆

【参考方案3】：

你可以堆叠很多路径，增加厚度和减少颜色，绘制一个在另一个之上。

对于具有相同几何图形的所有路径，您应该使用元素绑定到其中一个的Data 属性。

如果需要，很可能一些代码隐藏对动态生成路径和颜色渐变很有用。

【参考方案4】：

您可以在“LinearGradientBrush”上设置MappingMode="Absolute"。然后您的画笔开始/结束坐标与边界框无关。当然，你必须处理一些三角函数才能得到正确的点......

https://docs.microsoft.com/en-us/dotnet/api/system.windows.media.gradientbrush.mappingmode?view=netframework-4.7.2#System_Windows_Media_GradientBrush_MappingMode