Come posso disegnare un & # 8220; soft & # 8221; linea in WPF (presumibilmente usando un LinearGradientBrush)?

Question

Sto cercando di disegnare una linea con bordi morbidi, indipendentemente dalla pendenza.

Ecco il codice che ho finora:

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

Questo ha senso per me, poiché la linea è orizzontale e il gradiente lineare è verticale, con i bordi trasparenti e il centro della linea verde solido.

Il risultato è piacevole:

Ingrandito in modo da poter vedere il gradiente:
http://img225.imageshack.us/img225/5027/horizontalsoftlinezoomeb.png

Tuttavia, quando la linea non è più orizzontale, il gradiente viene calcolato in base al rettangolo di delimitazione della linea, piuttosto che alla geometria della linea stessa. Il risultato è una linea inclinata che viene ombreggiata verticalmente, invece che il gradiente è perpendicolare alla linea:
  

Qualcuno sa come WPF gestisce i bordi morbidi? Non riesco a trovare nulla su Google o MSDN e so che c'è un modo per farlo in qualche modo ...

Answer 1

Beh, non so se sia applicabile al tuo scenario ma potresti semplicemente ruotare la linea orizzontale usando LayoutTransform e il gradiente andrà bene.

<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

Prova a usare una forma anziché una linea

<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

Answer 3

Puoi impilare molti percorsi con spessore crescente e tonalità di colore decrescenti, disegnandoli uno sopra l'altro.

Affinché tutti i percorsi abbiano la stessa geometria, è necessario utilizzare Element Binding per la proprietà Data di uno di essi.

Molto probabilmente un po 'di code-behind sarebbe utile per generare dinamicamente i percorsi e le sfumature di colore, se necessario.

Answer 4

Puoi impostare MappingMode = " Absolute " su "LinearGradientBrush". Quindi le coordinate di inizio / fine del pennello non sono relative al riquadro di selezione. Certo, dovresti scricchiolare un po 'di trigonometria per ottenere i punti giusti ...

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