如何在WPF中绘制此路径?

时间:2012-01-26 17:48:27

标签: c# wpf xaml shapes

我需要在WPF中创建这个形状。首先,我认为是一条路径,但内部显示的线条是3D形状。

如何绘制包含线条的形状?

非常感谢。

enter image description here

1 个答案:

答案 0 :(得分:13)

使用Path和Ellipse对象可以非常简单地绘制形状的外部/轮廓。圆柱体的顶面也可以在网格中用许多线条(作为路径对象)绘制。您可以绘制它们,使它们都延伸到顶部椭圆之外,并使用顶部椭圆作为蒙版来修剪它们。

圆柱体内的垂直线稍微复杂一些。它们的坐标可以通过以下公式确定,假设圆柱的左边缘位于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 class

如果你需要的只是一种表示3D外观圆柱的方法,没有网格线,线性渐变画笔和2个路径对象就可以解决问题:

    <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

修改 好的,这个问题引起了我的兴趣,我在CodePoject上编写了一篇完整的文章,以及绘制解决方案的简单项目的源代码。通常情况下,我不会那么麻烦,但这对我来说是一个很好的简单项目,可以开始学习C#。