c# - ¿Cómo especificar la posición de una forma Ellipse en un lienzo en WPF?

.net graphics

Question

Estoy creando mediante programación una forma Ellipse pero no puedo encontrar ninguna propiedad que especifique su posición. Lines tienen X1, Y1, X2, Y2, pero no hay Centro, Posición, X, Y, etc. en una forma de Elipse. ¿Cómo puedo hacer esto?

Answer 1

Canvas.Left y Canvas.Top. Todo está en la documentación sobre "Cómo dibujar una elipse o un círculo" http://msdn.microsoft.com/en-us/library/ms751563.aspx

En el código C #, la sintaxis sería esta:

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

Answer 2

La colocación de formas en lugares arbitrarios en la pantalla probablemente debería hacerse en un Panel de lienzo (consulte la respuesta de @phoog). Pero si está colocando esto en una Cuadrícula o en algún otro panel, siempre puede modificar la propiedad Margen para colocarla donde lo desee.

Si desea hacerlo especificando el punto central en lugar de la esquina superior izquierda de la elipse, puede hacer esto:

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;
}

No he comprobado que esto haga exactamente lo que quieres en el compilador, pero espero que tengas la idea. Nuevamente, usar Canvas sería el método preferido en lugar de usar Margin dentro de un panel que no sea de Canvas, pero el mismo principio de calcular la izquierda y la parte superior aún se aplicaría:

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

Answer 3

Si tiene los puntos de inicio y finalización, así como el radio y un valor booleano, si es en el sentido de las agujas del reloj o no, utilice mi función :)

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);
}