locked
Rendering an Ellipse around a center point

    Question

  • I'm working on a custom control that allows an Ellipse, named Cursor, that acts as a sort of cursor to be moved around a square canvas area. During manipulation events, Lines are drawn from the corners of the canvas to the translated manipulated point. The problem I'm having is that I can't figure out how to render the ellipse so that it is drawn with its center where the lines converge. I always end up with a result where the ellipse drawing starts from it's upper left corner, like this:

    Here's my code for handling the manipulation events for the Ellipse. I've tried adding an offset to the transform for the ellipse but that just makes things worse.

    void MyControls::XYControl::Cursor_ManipulationDelta_1(Platform::Object^ sender, Windows::UI::Xaml::Input::ManipulationDeltaRoutedEventArgs^ e) { translateTransform->X += e->Delta.Translation.X ; translateTransform->Y += e->Delta.Translation.Y; int x = (int)translateTransform->X; int y = (int)translateTransform->Y; SetValue(X_ValueProperty, x ); SetValue(Y_ValueProperty, y); this->Cursor->RenderTransform = translateTransform; // Use TransformToVisual from the context of the cursor to // create coordinates relative to Bounds

    // Bounds is a Boundary element around the drawing canvas

    auto transform = Cursor->TransformToVisual(Bounds); auto p = transform->TransformPoint(Point(e->Delta.Translation.X, e->Delta.Translation.Y)); llLine->X2 = (int) p.X; llLine->Y2 = (int) p.Y; ulLine->X2 = (int) p.X; ulLine->Y2 = (int) p.Y; lrLine->X2 = (int) p.X; lrLine->Y2 = (int) p.Y; urLine->X2 = (int) p.X; urLine->Y2 = (int) p.Y; }

    Thanks


    Thursday, March 28, 2013 3:37 AM

Answers

  • I knew I had done it somewhere.

    It is in a WPF CAD program.

     Line myLine = new Line();
                        myLine.Stroke = color;
                        myLine.X1 = (tx1 - xradius / 2) + yradius / 2; ;
                        myLine.Y1 = ty1;
                        myLine.X2 = (tx1 + xradius / 2) - yradius / 2;
                        myLine.Y2 = ty1;
                        myLine.StrokeThickness = yradius;
                        myGrid.Children.Add(myLine);


    n.Wright

    Thursday, March 28, 2013 10:32 PM

All replies

  • You need to offset the ellipse by half its height and half its width.


    n.Wright

    Thursday, March 28, 2013 9:27 PM
  • I've tried that. I know that essentially this is what needs to happen but when I apply an offset to the transform values there is no change to the ellipse position.
    Thursday, March 28, 2013 9:43 PM
  • I cant see where you are applying the transform to move the start of the eclipse

    For the ellipse start point x,y you need to transform it by x-eclipsewidth/2 and y-eclipseheight/2

    I looked at my Win 8 app that uses ellipses and it doesn't need to move the start of the ellipse.

    So I am not quite sure why yours does.


    n.Wright




    					  D2D1_ELLIPSE ellipse2 = D2D1::Ellipse(
    					    D2D1::Point2F(tx2, ty2),
    						radius/2,
    						radius/2
    						);
    					  
    						m_d2dContext->FillEllipse(ellipse2, color);

    Thursday, March 28, 2013 9:50 PM
  • Thanks for your replies. My sample code doesn't demonstrate where I've tried an offset, but I have previously. It looks like you are using D2D to draw an ellipse, which does draw around a center point. I'm using a XAML Ellipse, which appears to have different rendering characteristics.

    Thursday, March 28, 2013 10:14 PM
  • I knew I had done it somewhere.

    It is in a WPF CAD program.

     Line myLine = new Line();
                        myLine.Stroke = color;
                        myLine.X1 = (tx1 - xradius / 2) + yradius / 2; ;
                        myLine.Y1 = ty1;
                        myLine.X2 = (tx1 + xradius / 2) - yradius / 2;
                        myLine.Y2 = ty1;
                        myLine.StrokeThickness = yradius;
                        myGrid.Children.Add(myLine);


    n.Wright

    Thursday, March 28, 2013 10:32 PM
  • Thanks again for your help. You helped me rethink the problem and I approached it not as a placement problem with the ellipse but as where to draw the intersecting lines. So I quit worrying about where to render the ellipse and worked on positioning the lines, which was a much easier problem to solve. Since I was dealing with this in a ManipulationDelta event handler, I had to start with offset as positioning information for the ellipse. Factoring in offsets for the deltas was more work then necessary, so I just moved the lines to the correct point. It's all working well now.
    Friday, March 29, 2013 3:05 AM