Silverlight - 如何用弧线绘制线条?

时间:2011-04-04 18:36:03

标签: silverlight geometry lines

我正在开发一个小型Silverlight应用程序(使用siverlight 4和c#)。在我的应用程序中,我需要根据它们的X,Y绘制坐标。然后,我需要根据它们之间的连接在一些点之间绘制线条。因为可以有几条线,而且我不能让它们全部相互交叉(因为它会把它变成一团糟),我需要画一些带有拱形的线条。

那么,解决这个问题的最佳方法是什么?

  • 创建我自己的x,y系统 - 以点为单位定位元素并绘制线条 - 如果是这样我如何用拱形绘制线条?
  • 使用提供类似功能的就绪控件?如果是这样,有什么控制权?

谢谢!

附件是一张小图片来说明我的需要(我不是大画家,对不起)。

enter image description here

1 个答案:

答案 0 :(得分:2)

看一下绘制贝塞尔曲线(MSDN Link)并了解不同的几何类型(MSDN Link

下面是一个代码示例,可以帮助您开始生成以下图像: Bezier Curve Sample

<Canvas x:Name="LayoutRoot" Background="White">
        <Path Stroke="Blue" StrokeThickness="2" >
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigureCollection>
                            <PathFigure StartPoint="50,50">
                                <PathFigure.Segments>
                                    <PathSegmentCollection>
                                       <BezierSegment 
                                           Point1="50,20"
                                           Point2="120,170"
                                           Point3="350,150"
                                       /> 
                                    </PathSegmentCollection>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathFigureCollection>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
        <Path Fill="Gold" Stroke="Black" StrokeThickness="1">
            <Path.Data>
                <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="20" />
            </Path.Data>
        </Path>
        <Path Fill="Gold" Stroke="Black" StrokeThickness="1">
            <Path.Data>
                <EllipseGeometry Center="350,150" RadiusX="20" RadiusY="20" />
            </Path.Data>
        </Path>
    </Canvas>