2012-01-26 10 views
5

Tôi cần phải tạo hình dạng này trong WPF. Đầu tiên, tôi nghĩ là một con đường, nhưng các đường bên trong chương trình là một hình dạng 3D.Làm thế nào để vẽ đường dẫn này trong WPF?

Làm cách nào để vẽ hình này bao gồm các dòng?

Thanks a lot.

enter image description here

+0

Bạn cần đặt đối tượng này làm đối tượng 3D hoặc chỉ vẽ thành hình ảnh 2d, ví dụ: canvas? –

+0

Tôi không chắc chắn chính xác như thế nào, nhưng hãy xem http://msdn.microsoft.com/en-us/library/ms747437.aspx có thể hữu ích – NominSim

+0

@andronz Vẽ trong 2D –

Trả lời

11

Bên ngoài/phác thảo hình dạng của bạn có thể được rút ra khá đơn giản với đường dẫn và các đối tượng Ellipse. Mặt trên cùng của hình trụ cũng có thể được vẽ bằng một số dòng (như đối tượng Đường dẫn) trong một lưới. Bạn chỉ có thể vẽ chúng để tất cả chúng mở rộng ra ngoài hình elip trên cùng và sử dụng hình elip trên cùng làm Mặt nạ để cắt chúng.

Các đường thẳng đứng trong phần thân của xilanh phức tạp hơn một chút. Tọa độ của chúng có thể được xác định theo công thức sau, giả sử cạnh trái của hình trụ nằm ở x = 0 và điểm mà cạnh trái của hình trụ đáp ứng cạnh trái của hình elip là 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 

trong đó NumberOfDivisions + 1 bằng số dòng bạn muốn hiển thị trên hình trụ.

MSDN có một số ví dụ hay để bắt đầu với số Path class.

Nếu tất cả các bạn cần chỉ là một cách để đại diện cho một xi lanh 3D-looking, mà không có sự gridlines, một bàn chải linear gradient và 2 đối tượng đường dẫn sẽ làm các trick:

<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

EDIT Ok, câu hỏi này khiến tôi đủ hứng thú khi tôi gặp rắc rối khi viết một bài báo hoàn chỉnh cho nó trên CodePoject, cùng với mã nguồn cho một dự án đơn giản để vẽ giải pháp. Thông thường, tôi sẽ không gặp nhiều rắc rối, nhưng đây là một dự án đơn giản để tôi bắt đầu học C#.

+0

Tôi không nghĩ đó là kết quả mà anh ấy muốn, nhưng +1 vì đó là một ví dụ tuyệt vời. =) – CodingGorilla

+0

... một ví dụ rất hay. +1 từ tôi nữa :) –