在Silverlight </canvas>中的<canvas>上绘制两个对象之间的弯曲路径

时间:2010-03-01 03:57:52

标签: silverlight geometry

我正在玩Silverlight中的一些东西,我试图在<Canvas/>上的两个其他对象之间动态绘制一条曲线。我尝试过这样的事情:

公共部分类MainNodeConnection:UserControl {     private MainNode _sourceNode;     public MainNode SourceNode     {         get {return _sourceNode; }         设置{_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();
    }
}

我遇到的问题是我无法显示该行。任何人都可以发现我做错了什么,或者是否有不同/更好的方法来做到这一点?

1 个答案:

答案 0 :(得分:2)

Bezier曲线中缺少Point2Point3。 从帮助文件:

  

立方贝塞尔曲线定义为   四点:起点,终点   point(Point3)和两个控制点   (Point1和Point2)。 BezierSegment   class不包含属性   曲线的起点;它   只定义终点。该   曲线的起点是   PathFigure的当前点   其中添加了BezierSegment。

     

立方体的两个控制点   贝塞尔曲线表现得像磁铁,   吸引了部分内容   否则是一条直线   他们自己并产生一条曲线。该   第一个控制点,Point1,影响   曲线的起始部分;   第二个控制点,Point2,   影响到的结尾部分   曲线。请注意,曲线没有   必须通过其中任何一个   控制点;每个控制点   将其部分线移向   本身,但不是通过自身。