2012-01-26 12 views
5

Necesito crear esta forma en WPF. Primero, pensé que era un camino, pero las líneas interiores muestran una forma 3D.¿Cómo dibujar esta ruta en WPF?

¿Cómo puedo dibujar esta forma, incluidas las líneas?

Muchas gracias.

enter image description here

+0

Tiene que hacer esto como un objeto en 3D o solo dibujar como imagen 2D en, por ejemplo, lienzo? –

+0

No estoy seguro de cómo, pero consulte http://msdn.microsoft.com/en-us/library/ms747437.aspx que podría ser útil – NominSim

+0

@andronz Dibujar en 2D –

Respuesta

11

El exterior/contorno de su forma se puede sacar bastante simplemente con la trayectoria y los objetos de la elipse. La cara superior del cilindro también se puede dibujar con varias líneas (como objetos Path) en una cuadrícula. Puedes dibujarlos para que se extiendan fuera de la elipse superior y usar la elipse superior como máscara para recortarlos.

Las líneas verticales en el cuerpo del cilindro son un poco más complicadas. Sus coordenadas se pueden determinar por la siguiente fórmula, asumiendo que el borde izquierdo del cilindro está en x = 0 y el punto donde el borde izquierdo del cilindro se encuentra con el borde izquierdo de la elipse es 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 

donde NumberOfDivisions + 1 es igual al número de líneas que desea mostrar en el cilindro.

MSDN tiene algunos buenos ejemplos para comenzar con el Path class.

Si todo lo que necesita es simplemente una manera de representar un cilindro mirando 3D, sin las líneas de división, un cepillo de gradiente lineal y 2 objetos de trazado hará el truco:

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

enter image description here

EDITAR Bien, estas preguntas me intrigaron lo suficiente como para tomarme la molestia de escribir un artículo completo en CodePoject, junto con el código fuente de un proyecto simple para dibujar la solución. Normalmente, no me tomaría tantas molestias, pero este fue un proyecto simple y agradable para que comenzara a aprender C#.

+0

No creo que sea el resultado que él quiere, pero +1 porque es un buen ejemplo. =) – CodingGorilla

+0

... un ejemplo genial. +1 de mí también :) –

Cuestiones relacionadas