Làm thế nào tôi có thể vẽ một dòng "mềm" trong WPF (có lẽ sử dụng LinearGradientBrush)?

Question

Tôi đang cố vẽ đường thẳng với các cạnh mềm, bất kể độ dốc.

Dưới đây là đoạn code tôi có cho đến nay:

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

này có ý nghĩa đối với tôi, vì đường thẳng nằm ngang, và gradient tuyến tính là thẳng đứng, với các cạnh được minh bạch và trung bình của dòng là rắn xanh.

Kết quả là dễ chịu:
http://img15.imageshack.us/img15/4108/horizontalsoftline.png
phóng to để bạn có thể nhìn thấy gradient:
http://img225.imageshack.us/img225/5027/horizontalsoftlinezoomeb.png

Tuy nhiên, khi dòng không còn ngang, gradient được tính dựa trên hình chữ nhật bounding của dòng , thay vì trên hình học của chính dòng đó. Kết quả là một đường nghiêng được tô bóng theo chiều dọc, thay vì gradient vuông góc với đường thẳng:
http://img183.imageshack.us/img183/7250/slantedsoftline.png

Có ai biết WPF xử lý các cạnh mềm không? Tôi không thể tìm thấy bất kỳ thứ gì trên Google hoặc MSDN và tôi biết có cách để thực hiện việc này ...

Answer 1

Vâng, tôi không biết liệu điều đó có áp dụng được cho kịch bản của bạn hay không. bằng cách sử dụng LayoutTransform và gradient sẽ ổn.

<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

Cố gắng sử dụng một hình dạng thay vì một dòng

<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

Bạn có thể stack nhiều con đường với sự gia tăng độ dày và giảm sắc thái màu sắc , vẽ cái này lên cái kia.

Đối với tất cả các đường dẫn có cùng một hình, bạn nên sử dụng phần tử Binding để thuộc tính Data của một trong số chúng.

Hầu hết một số mã phía sau sẽ hữu ích khi tạo đường dẫn và độ dốc màu một cách linh hoạt, nếu cần.