2つの図形を一緒に接続する、Silverlight 2
-
19-08-2019 - |
質問
2つの図形またはオブジェクトを線で接続または接着することを検討しています。これらの形状は動的に生成されます。つまり、バックエンドでWebサービスを呼び出して、作成する必要があるオブジェクト/形状の数を決定します。これが決定したら、オブジェクト/シェイプを接続する必要があります。
メソッドシグネチャは次のようになります(Visioの描画機能に似ています):
GlueTogether(objButton1, objButton2);
各Rectangleシェイプまたはボタンの位置を取得して、開始ラインポイントの位置を決定する必要がある場合があります。次に、線を描く2番目の形状/オブジェクトの位置を決定します。
どんなヘルプや提案も素晴らしいでしょう!
解決
- シェイプの下にパスまたはラインを重ね順またはzインデックスで使用します
- instance.TransformToVisual()を使用して、各形状の変換を取得します
- 変換を使用して、各形状の中心点を変換します
- 2つの中心点の間に線を引きます。
var transform1 = shape1.TransformToVisual(shape1.Parent as UIElement);
var transform2 = shape2.TransformToVisual(shape2.Parent as UIElement);
var lineGeometry = new LineGeometry()
{
StartPoint = transform1.Transform(new Point(shape1.ActualWidth / 2, shape1.ActualHeight / 2.0)),
EndPoint = transform2.Transform(new Point(shape2.ActualWidth / 2.0, shape2.ActualHeight / 2.0))
};
var path = new Path()
{
Data = lineGeometry
};
他のヒント
ほとんど同じことを試みていますが、1つの中心から別の中心に向かう線の代わりに、2つの形状の端で停止するようにします。 特に、線の端に矢印があります。矢印は、図形の内側/後ろから中心に移動するのではなく、図形の境界で停止する必要があります。
私の形状は、グリッドと長方形、およびいくつかのラベルとその他のものを持つユーザーコントロールです。 シェイプのエッジのジオメトリ(丸みを帯びた長方形)を提供するメソッドが見つかりません。
バウンディングボックスと交差点を使用して、おおよその端で線で要素を接続するソリューションを見つけました。矢印で終了する線を使用するとうまく機能します。
こちらをご覧ください: http://www.graphspe。 com / Main.aspx#/ Solution / graphviz-xaml-renderer
必要なことは、printfを文字列に追加するだけで、Silverlight [2 | 3]ダイアグラムを取得できます。
セイフン
さらに...オブジェクトの中心点に接続する代わりに、Michael S.からの同じコードを次のように変更しました。
var lineGeometry = new LineGeometry()
{
StartPoint = transform1.Transform(new Point(1 , b1.ActualHeight / 2.0)),
EndPoint = transform2.Transform(new Point(b2.ActualWidth , b2.ActualHeight / 2.0))
};
これにより、各オブジェクトの外側部分が接続されます。
上記のコードを使用して2つのボタンを描画しています。これらの2つのボタンの間に線を引きたいのですが、得られるのは小さな円のように見える2つのボタンだけで、線はありません。
コード:
Button b1 = new Button();
Button b2 = new Button();
canvas1.Children.Add(b1);
canvas1.Children.Add(b2);
Canvas.SetLeft(b1, 300);
var transform1 = b1.TransformToVisual(b1.Parent as UIElement);
var transform2 = b2.TransformToVisual(b2.Parent as UIElement);
var lineGeometry = new LineGeometry()
{
StartPoint = transform1.Transform(new Point(1, b1.ActualHeight / 2.0)),
EndPoint = transform2.Transform(new Point(b2.ActualWidth, b2.ActualHeight / 2.0))
};
var path = new Path()
{
Data = lineGeometry
};
canvas1.Children.Add(path);