web-dev-qa-db-ja.com

WPFでキャンバス上の楕円形の位置を指定する方法

プログラムで楕円形を作成していますが、その位置を指定するプロパティが見つかりません。 LinesにはX1、Y1、X2、Y2がありますが、楕円形には中心、位置、X、Yなどはありません。これどうやってするの?

16
Joan Venge

画面上の任意の場所に図形を配置することは、おそらくキャンバスパネルで行う必要があります(@phoogの応答を参照)。ただし、これをグリッドまたは他のパネルに配置する場合は、常にMarginプロパティを変更して、必要な場所に配置できます。

楕円の左上隅の代わりに中心点を指定してそうしたい場合は、次のようにします。

Ellipse CreateEllipse(double width, double height, double desiredCenterX, double desiredCenterY)
{
    Ellipse ellipse = new Ellipse { Width = width, Height = height };
    double left = desiredCenterX - (width / 2);
    double top  = desiredCenterY - (height/ 2);

    ellipse.Margin = new Thickness(left, top, 0, 0);
    return ellipse;
}

私はこれがコンパイラであなたが望んでいることを正確に実行することを確認していませんが、うまくいけばあなたはアイデアを得るでしょう。繰り返しになりますが、Canvasを使用することは、Canvas以外のパネル内でMarginを使用するよりも推奨される方法ですが、左と上を計算する同じ原理が適用されます。

Canvas.SetLeft(ellipse, desiredCenterX - (width/2))
Canvas.SetTop(ellipse, desiredCenterY - (height/2))
21
viggity

Canvas.LeftおよびCanvas.Top。 「楕円または円を描画する方法」のドキュメントにすべて記載されています http://msdn.Microsoft.com/en-us/library/ms751563.aspx

C#コードでは、構文は次のようになります。

void CreateCanvasWithEllipse(double desiredLeft, double desiredTop)
{
    Canvas canvas = new Canvas();
    Ellipse ellipse = SomeEllipseConstructionMethod();
    Canvas.SetLeft(ellipse, desiredLeft);
    Canvas.SetTop(ellipse, desiredTop);
}
14
phoog

開始点と終了点、半径と時計回りかどうかのブール値がある場合は、私の関数を使用してください:)

function ellipse(x1, y1, x2, y2, radius, clockwise) {
    var cBx = (x1 + x2) / 2;    //get point between xy1 and xy2
    var cBy = (y1 + y2) / 2;
    var aB = Math.atan2(y1 - y2, x1 - x2);  //get angle to bulge point in radians
    if (clockwise) { aB += (90 * (Math.PI / 180)); }
    else { aB -= (90 * (Math.PI / 180)); }
    var op_side = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) / 2;
    var adj_side = Math.sqrt(Math.pow(radius, 2) - Math.pow(op_side, 2));

    if (isNaN(adj_side)) {
        adj_side = Math.sqrt(Math.pow(op_side, 2) - Math.pow(radius, 2));
    }

    var Cx = cBx + (adj_side * Math.cos(aB));            
    var Cy = cBy + (adj_side * Math.sin(aB));
    var startA = Math.atan2(y1 - Cy, x1 - Cx);       //get start/end angles in radians
    var endA = Math.atan2(y2 - Cy, x2 - Cx);
    var mid = (startA + endA) / 2;
    var Mx = Cx + (radius * Math.cos(mid));
    var My = Cy + (radius * Math.sin(mid));
    context.arc(Cx, Cy, radius, startA, endA, clockwise);
}
0
Grant