Как нарисовать этот путь в WPF?

Question

Мне нужно создать эту форму в WPF.Во-первых, я думал, что это путь, но линии внутри шоу - это трехмерная фигура.

Как мне нарисовать эту фигуру, включая линии?

Большое спасибо.

Answer 1

Снаружи / контур вашей фигуры может быть нарисован довольно просто с помощью объектов Path и Ellipse. Верхняя грань цилиндра также может быть нарисована с помощью ряда линий (в виде объектов Path) в сетке. Вы можете просто нарисовать их так, чтобы они все выходили за пределы верхнего эллипса и использовать верхний эллипс в качестве маски для обрезки.

Вертикальные линии в корпусе цилиндра немного сложнее. Их координаты могут быть определены по следующей формуле, если предположить, что левый край цилиндра находится в точке x = 0, а точка, где левый край цилиндра встречается с левым краем эллипса, равна 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

где NumberOfDivisions + 1 равно количеству линий, которые вы хотите показать на цилиндре.

В MSDN есть несколько хороших примеров для начала работы с классом Path .

Если все, что вам нужно, это просто способ представить трехмерный цилиндр без линий сетки, то с помощью кисти линейного градиента и двух объектов пути:

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

EDIT Хорошо, эти вопросы заинтриговали меня настолько, что я решил написать для него полную статью по CodePoject вместе с исходным кодом для простого проекта, чтобы нарисовать решение. Обычно я бы не стал так сильно беспокоиться, но для меня это был хороший простой проект - начать изучать C #.