Как нарисовать «мягкую» линию в 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 обрабатывает мягкие края? Я не могу найти что-либо в Google или MSDN, и я знаю, что есть способ сделать это каким-то образом ...

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>

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>

Томер

Answer 3

Вы можете установить MappingMode="Absolute" на свой «LinearGradientBrush». Тогда ваши начальные / конечные координаты кисти не относятся к ограничивающей рамке. Конечно, вам нужно было бы использовать некоторую тригонометрию, чтобы получить правильные очки ...

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

Answer 4

Вы можете сложить множество путей с увеличением толщины и уменьшением цветовых оттенков, рисуя один над другим.

Чтобы все пути имели одинаковую геометрию, вы должны использовать привязку элемента к свойству Data одного из них.

Скорее всего, какой-то код будет полезен для динамической генерации контуров и цветовых градиентов, если это необходимо.