Silverlight - как нарисовать линию дугой?

Я разрабатываю небольшое приложение Silverlight (с использованием siverlight 4 и C #). В моем приложении мне нужно нарисовать координаты на основе их X, Y. Затем мне нужно провести линии между некоторыми точками на основе связей между ними. Поскольку может быть несколько линий, и я не могу, чтобы все они пересекались друг с другом (так как это превратит это в беспорядок), мне нужно нарисовать некоторые из моих линий аркой.

Итак, как лучше всего подойти к этому вопросу?

  • Создайте свою собственную систему x, y - расположите элементы в точках и начертите линии - Если да, то как я могу нарисовать линию с дугой?
  • Использовать готовый элемент управления, предоставляющий аналогичные возможности? Если да, то какой контроль?

Спасибо!

Прилагаю небольшое изображение, чтобы проиллюстрировать мою потребность (я не большой художник, извините).

введите описание изображения здесь


person vondip    schedule 04.04.2011    source источник


Ответы (1)


Взгляните на рисунок кривых Безье (MSDN Link) и узнайте о различных типах геометрии (Ссылка MSDN)

Ниже приведен пример кода, который поможет вам начать работу. В результате будет получено следующее изображение: Образец кривой Безье

<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>
person NakedBrunch    schedule 04.04.2011
comment
есть ли способ сделать это с помощью простого класса Line? - person vondip; 05.04.2011
comment
Линия может быть только прямой. Здесь не так много вариантов. Кривые Безье определенно ваш лучший и, скорее всего, единственный выбор. - person NakedBrunch; 05.04.2011
comment
Я понимаю, знаете ли вы какую-либо платформу с открытым исходным кодом, которая легко поддерживает позиционирование точек и рисование между ними? - person vondip; 05.04.2011
comment
Я не знаю, но вы не должны разочаровываться в изучении кривых Безье. Если вы потратите немного времени на чтение MSDN, а затем изучите мой ответ, вы сможете справиться с этим самостоятельно. - person NakedBrunch; 05.04.2011
comment
Отлично, спасибо. Поддерживают ли кривые Безье анимацию? Могу ли я оживить рисунок линии? - person vondip; 05.04.2011
comment
По-разному. Вы можете анимировать углы (например, контрольные точки) кривой, но я не уверен, что вы можете анимировать фактическое рисование кривой. Это интересный вопрос, и, возможно, стоит задать новый вопрос, чтобы посмотреть, что люди придумают. - person NakedBrunch; 05.04.2011
comment
Ок, отлично. вы можете увидеть следующий вопрос в этом URL-адресе: stackoverflow.com/questions/5547982/ - person vondip; 05.04.2011
comment
@Alison, есть ли способ нарисовать сегмент Безье с точками? - person vondip; 05.04.2011