Как я могу нарисовать "мягкую" строку в WPF (предположительно используя LinearGradientBrush)?

Я пытаюсь нарисовать линию с мягкими краями, независимо от наклона.

Вот код, который я имею до сих пор:

<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, и я знаю, что есть способ сделать это каким-то образом...

Ответ 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>

Ответ 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

Вы можете установить 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