Рисование полилинии, которая постепенно исчезает

Я пытаюсь нарисовать Polyline, чья непрозрачность постепенно исчезает по мере продвижения тропы, имитируя эффект маркера, который заканчивается чернилами. Сначала я принял наивный подход с LinearGradientBrush.Рисование полилинии, которая постепенно исчезает

LinearGradientBrush lgb = new LinearGradientBrush(); 
lgb.GradientStops.Add(new GradientStop(Color.FromArgb(255, 255, 0, 0), 0.0)); 
lgb.GradientStops.Add(new GradientStop(Color.FromArgb(0, 255, 0, 0), 1.0)); 
line.Stroke = lgb;

Как вы можете видеть на изображении ниже, это не совсем сработало для меня. Я нарисовал две полилинии, начиная с позиции руки. Хотя путь «Нижний левый» правильно рисуется, когда исчезает, путь «Верхний левый» рисуется как затухание, но это не то, что я хочу. Похоже, эффект градиента не применяется так, как мне это нужно.

Polyline rendering

Как я могу нарисовать Polyline где линия постепенно исчезает, как путь Приближается это конец?

Редактировать: Вот новый подход к моей проблеме, что я в настоящее время изучает. Если я использую PathGeometry, могу ли я установить кисти отдельных сегментов линии?

источник

2014-02-21 Pieter

Я нашел the GradientPath library, который позволяет мне рисовать градиент по пути, на пути, который я хотел бы использовать его. Вот пример рендеринга.

Result

источник

2014-02-25 12:45:29 Pieter

Я думаю, вы должны установить StartPoint и EndPoint свойства LinearGradientBrush в соответствии с начальными/конечными точками вашего PolyLine.

Ну, может быть, не точные значения StartPoints/EndPoint, а нормализованные значения, соответствующие наклону вашей линии.

Это работает только для прямых или почти прямых полилиний.

Например:

<Window.Resources> 
    <LinearGradientBrush x:Key="lgb" StartPoint="0,0" EndPoint="1,1"> 
     <LinearGradientBrush.GradientStops> 
      <GradientStop Color="Green" Offset="0"/> 
      <GradientStop Color="Transparent" Offset="1"/> 
     </LinearGradientBrush.GradientStops> 
    </LinearGradientBrush> 

    <LinearGradientBrush x:Key="lgb2" StartPoint="1,0" EndPoint="0,1"> 
     <LinearGradientBrush.GradientStops> 
      <GradientStop Color="Green" Offset="0"/> 
      <GradientStop Color="Transparent" Offset="1"/> 
     </LinearGradientBrush.GradientStops> 
    </LinearGradientBrush> 

    <LinearGradientBrush x:Key="lgb3" StartPoint="1,1" EndPoint="0,0"> 
     <LinearGradientBrush.GradientStops> 
      <GradientStop Color="Green" Offset="0"/> 
      <GradientStop Color="Transparent" Offset="1"/> 
     </LinearGradientBrush.GradientStops> 
    </LinearGradientBrush> 

</Window.Resources> 
<Grid> 
    <Polyline Stroke="{StaticResource lgb}" StrokeThickness="10"> 
     <Polyline.Points> 
      <Point X="150" Y="150"/> 
      <Point X="300" Y="300"/> 
     </Polyline.Points> 
    </Polyline> 

    <Polyline Stroke="{StaticResource lgb2}" StrokeThickness="10"> 
     <Polyline.Points> 
      <Point X="150" Y="150"/> 
      <Point X="0" Y="300"/> 
     </Polyline.Points> 
    </Polyline> 

    <Polyline Stroke="{StaticResource lgb3}" StrokeThickness="10"> 
     <Polyline.Points> 
      <Point X="150" Y="150"/> 
      <Point X="140" Y="140"/> 
     </Polyline.Points> 
    </Polyline> 
</Grid>

источник

2014-02-21 15:16:40 franssu

Поправьте меня, если я ошибаюсь, но в моих тестах это перестает работать, когда 'Polyline' делает разворот. Я попробовал это с этими пунктами: * (150, 150); (150, 50); (250, 50); (250, 150) * – Pieter

Вы правы, это работает только для прямых PolyLines .. вам, возможно, придется разбить PolyLines на строки .. – franssu

Я попытался сломать 'Полилинию' на' Линии' раньше, но тогда углы выглядят странно, если значение толщины штриха больше 1. – Pieter

Рисование полилинии, которая постепенно исчезает

ответ

Смежные вопросы