Нарисуйте изогнутый путь между двумя объектами в <Canvas /> в Silverlight

Question

Я играю с некоторыми вещами в Silverlight и пытаюсь динамически нарисовать кривую линию между двумя другими объектами на <Canvas/>. Я пытался сделать что-то вроде этого:

открытый частичный класс MainNodeConnection: UserControl { частный MainNode _sourceNode; общедоступный MainNode SourceNode { get {return _sourceNode; } set {_sourceNode = value; } }

private ChildNode _targetNode;
public ChildNode TargetNode 
{
    get { return _targetNode; }
    set { _targetNode = value; }
}

private double _sourceX;
private double _sourceY;
private double _targetX;
private double _targetY;

private Path _connection;

public MainNodeConnection()
{
    InitializeComponent();
    _connection = new Path();
    this.Content = _connection;
}

public void UpdateLocations()
{
    _sourceX = Canvas.GetLeft(_sourceNode) + (SourceNode.Width/2);
    _sourceY = Canvas.GetTop(_sourceNode) + (SourceNode.Height/2);
    _targetX = Canvas.GetLeft(_targetNode);
    _targetY = Canvas.GetTop(_targetNode);
    string pathData = String.Format("M {0},{1} C {2},{3} {4},{5}", _sourceX, _sourceY, _targetX - _sourceX, _targetY - _sourceX, _targetX, _targetY);
    PathGeometry geoData = new PathGeometry();
    PathFigure pFigure = new PathFigure();
    pFigure.StartPoint = new Point(_sourceX, _sourceY);
    BezierSegment pseg = new BezierSegment();
    pseg.Point1 = new Point(_targetX - _sourceX, _targetY - _sourceY);
    pFigure.Segments.Add(pseg);
    geoData.Figures.Add(pFigure);
    _connection.Stroke = new SolidColorBrush(Colors.Black);
    _connection.StrokeThickness = 1;
    _connection.Data = geoData;
    this.Content = _connection;
}

}

и я построил объекты на <Canvas/> так:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        Loaded += new RoutedEventHandler(MainPage_Loaded);
    }

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        MainNodeConnection mnc = new MainNodeConnection();
        mnc.Width = 300;
        mnc.Height = 300;
        Canvas.SetLeft(mnc, Canvas.GetLeft(mainNode1));
        Canvas.SetTop(mnc, Canvas.GetTop(mainNode1));
        mnc.SourceNode = mainNode1;
        mnc.TargetNode = childNode1;
        nodeCanvas.Children.Add(mnc);
        mnc.UpdateLocations();
    }
}

Проблема в том, что я не могу найти линию. Кто-нибудь может заметить, что я делаю неправильно, или есть другой / лучший способ сделать это?

Answer 1

Вы пропускаете Point2 и Point3 в кривой Безье. Из файла справки:

Кубическая кривая Безье определяется как четыре точки: начальная точка, конец точка (Point3) и две контрольные точки (Точка 1 и Точка 2). Безье сегмент класс не содержит свойство для начальная точка кривой; Это определяет только конечную точку. Начальная точка кривой является текущая точка PathFigure для который добавлен сегмент Безье.

Две контрольные точки кубического Кривая Безье ведет себя как магниты, привлечение части того, что было бы иначе быть прямой линией к сами и производя кривую. первая контрольная точка, Point1, влияет начальная часть кривой; вторая контрольная точка, Point2, влияет на конечную часть кривая. Обратите внимание, что кривая не обязательно пройти через любой из контрольные точки; каждая контрольная точка перемещает свою часть линии в направлении сам, но не через себя.