如何在WPF中绘制“柔和”的线条（可能使用LinearGradientBrush）？

Question

我试图画一条有柔和边缘的线，而不管其斜率如何。

这是我目前的代码：

<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如何处理软边缘吗？我在谷歌和MSDN上找不到相关信息，但我知道肯定有方法可以做到这一点......

- Giffyguy

---

好问题。我一直在尝试弄清楚如何制作带有那样线条的边框。我有一种感觉答案会相关。 - Bryan Anderson

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

@Peregrine 是的...九年前我提出这个问题时没有注册要求（当时StackOverflow不允许在问题中直接嵌入图像）。如果有人能查看这些图像，请随意编辑问题，将嵌入式图像包含在内，而不是超链接。 - Giffyguy

@Giffyguy 对不起，没有注意到这个问题的年龄 - 它只是因为最近有人回答了它而进入了我的推送。 - Peregrine

Answer 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>

- Milan Nankov

---

嗯，这是一个可以接受的解决方法……我不太想这样做，因为这个解决方案可能会破坏我的数学坐标系统——但如果结果还可以的话，这似乎是一个相当小的代价。我应该补充一下，我正在使用RenderTransform，而不是LayoutTransform。我认为LayoutTransform会产生相同的结果，但我还没有测试过。 - Giffyguy

Answer 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>

Tomer

- Tomer Shamam

Answer 3

你可以在 'LinearGradientBrush' 上设置 MappingMode="Absolute"。这样，你的画刷起始/结束坐标就不是相对于边界框的了。当然，你需要计算一些三角函数来获取正确的点...

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

- wernerwichita

Answer 4

您可以堆叠许多路径，增加厚度和减少颜色色调，将一个路径绘制在另一个路径上。

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

如果需要动态生成路径和颜色渐变，则很可能需要一些代码后台。

- heltonbiker