Jak narysować tę ścieżkę w WPF?

Question

Potrzebuję utworzyć ten kształt w WPF. Najpierw myślałem, że jest to ścieżka, ale linie wewnątrz pokazuje kształt 3D.

Jak narysować ten kształt, w tym linie?

Wielkie dzięki.

Answer 1

Na zewnątrz/zarys kształtu można wyciągnąć całkiem prosto z drogi i obiektów elipsy. Górna powierzchnia cylindra może być również narysowana za pomocą szeregu linii (jako obiektów ścieżki) w siatce. Możesz po prostu narysować je tak, aby wszystkie znalazły się poza górną elipsą i użyły górnej elipsy jako maski do ich przycięcia.

Pionowe linie w korpusie cylindra są nieco bardziej skomplikowane. Ich współrzędne można wyznaczyć według następującego wzoru, przy założeniu, że lewa krawędź cylindra w punkcie x = 0, a punkt, w którym lewy brzeg cylindra spotyka się z lewej krawędzi elipsy to y = 0

For i = 0 to NumberOfDivisions 
    HorizontalPosition = CircleRadius - (cos(pi/NumberOfDivisions * i) * CircleRadius) 
    TopOfLine = sin(pi/NumberOfDivisions * i) * CircleRadius * 0.5 //The 0.5 assumes that the ellipse will only be half as tall as it is wide. 
    BottomOfLine = TopOfLine + HeightOfCylinder 
    //draw vertical line where: 
    //X1=HorizontalPosition, Y1=TopOfLine 
    //X2=HorizontalPosition, Y2=BottomOfLine 
Next 

gdzie NumberOfDivisions + 1 jest równa liczbie linii, które chcesz pokazać na cylindrze.

MSDN ma kilka dobrych przykładów na rozpoczęcie pracy z Path class.

Jeśli wszystkie potrzebne jest tylko sposobem reprezentacji 3D wyglądający cylinder, bez kratek, liniowy pędzla gradientu i 2 ścieżki obiektów rade:

<Canvas > 
     <Path Width="111" Height="113.5" Canvas.Left="0" Canvas.Top="12.5" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 177,190C 176.999,196.903 152.375,202.5 122,202.5C 91.6246,202.5 67.0006,196.903 67,189.979L 67,90L 177,90L 177,190 Z "> 
      <Path.Fill> 
       <LinearGradientBrush StartPoint="-0.00454615,0.5" EndPoint="1.00455,0.5"> 
        <LinearGradientBrush.GradientStops> 
         <GradientStop Color="#FF28A528" Offset="0"/> 
         <GradientStop Color="#FF63B963" Offset="0.152943"/> 
         <GradientStop Color="#FF9FCE9F" Offset="0.362069"/> 
         <GradientStop Color="#FF006C00" Offset="0.991379"/> 
        </LinearGradientBrush.GradientStops> 
       </LinearGradientBrush> 
      </Path.Fill> 
     </Path> 
     <Path Width="111" Height="26" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF2CF72C" Data="F1 M 122,77.4999C 152.376,77.4999 177,83.0964 177,89.9999C 177,96.9035 152.376,102.5 122,102.5C 91.6244,102.5 67.0001,96.9035 67.0001,89.9999C 67.0001,83.0964 91.6245,77.4999 122,77.4999 Z "/> 
    </Canvas> 

EDYTOWANIE OK, to pytanie zaintrygowało mnie na tyle, że zadałam sobie trud napisania całego artykułu na ten temat pod numerem CodePoject, wraz z kodem źródłowym prostego projektu do narysowania rozwiązania. Zwykle nie zadałbym sobie trudu, ale był to dla mnie prosty prosty projekt, aby zacząć uczyć się języka C#.