繪製逐漸淡出的折線

Question

我試圖畫出一個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其中線逐漸淡出因爲它臨近結束的路徑？

---

編輯：這是一種新的方法，以我的問題，我目前正在探索中。如果我使用PathGeometry，我可以設置線條的各個部分的畫筆嗎？

Answer 1

我發現the GradientPath library，這讓我畫一個梯度的，我想用它的方式的路徑。這是一個示例渲染。

Answer 2

我想你必須設置LinearGradientBrush的StartPoint和EndPoint屬性來匹配PolyLine的開始/結束點。

那麼，也許不是StartPoints/EndPoint的確切值，而是標準化的值，以匹配您的線的斜率。

這隻適用於筆直或幾乎筆直的PolyLines。

例如：

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