ThinkGeo.com    |     Documentation    |     Premium Support

Drawing an Arc clock wise and Anti Clock wise using Mouse drag Desktop Edition Win Forms map Version 9

#1

Dear ThinkGeo Team,

We have a requirement of drawing shapes having one or multiple Arc(s), that means for example while drawing a Polygon I can add an Arc and then continue drawing the polygon shape, could be drawing one Arc or multiple as per the need.

I am not sure if you guys having an API which can make my life easy or what sort of ideas you can throw to me so I can use to start doing that requirement.

As per the shape of the hyperlink, it is a sector simple form of polygon with and Arc, I need to be able to “click 1” create the origin or centre point and then drag the mouse up and then make “Click 2” that is going to be my “Radius” and then drag/move the mouse clock wise and then “Click 3” difference between “Point 1” and “Point 2” is going to give me the angle which allow me to create the Arc.

Your help is much appreciated
Thank You,
Ossama

#2

Hi Ossama,

We don’t have API to draw the Arc, draw Arc as a part of Polygon is more harder.

And if you want to implement that by the inherit our class, that’s should also be very complex task, you can refer this post to see how to start with that: TrackInteractiveOverlay with TrackMode Orthogonal/Rectangular

In fact if you only want to get the target shape, you can directly draw the Arc by GDI+, the API should be DrawArc and DrawPie but not need to implement that by the map API.

Wish that’s helpful.

Regards,

Ethan

#3

Hi Ethan,

If I need to use GDI, how can I do that on Desktop version?
I have tried to draw the Arc using “GetLineOnALine” by specifying start point and end point, it does not work quite correct when one point is on the right half of the ellipse and the other point is on the left half of the ellipse and vise-versa.

        EllipseShape ellipseShape = new EllipseShape(centerPoint, radius); 
        RingShape ring = ellipseShape.GetConvexHull();
        ring.Vertices.RemoveAt(ring.Vertices.Count - 1);            
        LineShape curveLine = new LineShape(ring.Vertices);
        curvedLine = (LineShape)curveLine.GetLineOnALine(sPoint, ePoint);

Am I missing anything here?
Thank you,
Ossama

#4

Hi Ossama,

  1. You can find more documentation about draw GDI+ on a winforms control for example: https://docs.microsoft.com/en-us/dotnet/framework/winforms/advanced/how-to-draw-a-line-on-a-windows-form

  2. The reason is that’s still be a line, just the first point at the same coordinate to the end point, but they didn’t connect, so the API cannot skip the fracture. I build a sample for you, the custom function can help you solve that. You can see the line1 and line2 works well. 8870.zip (102.8 KB)

  3. In fact I found another solution here, I think that should be helpful, please refer Ben’s code here: Draw curve/arc It built the WKT and directly render the WKT, maybe that’s helpful.

Regards,

Ethan

#5

Hi Ethan,

Thanks for your help, it worked well for clockwise or counter-clock wise separately.
Is there any API which decide if the mouse on the screen moves clock wise or anti clock wise?

Thanks in advance,
Ossama

#6

Hi Ethan again,

What I wanted to explain in the previous message is:
The solution you have provided is working well in our case “Line 1” is letting draw an Arc or a complete circle anti-clockwise.
if I comment “Line 1” and activate “Line 2” I can draw an arc or a complete circle clockwise.
The mouse event I am using at the moment to draw are as follow:
Mouse_Move
Mouse_Click
Mouse_Up

What I need to achieve is to be able to draw the arc or the complete circle by mouse move either moving the mouse from the starting point clockwise or anti-clockwise.

I was able to identify in which quadrant is the starting point (first, second, third , fourth), and then was able to identify based on which quadrant is the starting point to know if mouse moving clockwise or anti-clockwise, but I was wondering if you got any API doing that will make life more easier for me.

I hope I made myself more clear.

Thank You,
Ossama

#7

Hi Ossama,

Thanks for your detail description.

But in fact i still don’t very clear about the problem, because I don’t know how you make user move their mouse follow an arc or circle, if they just move a line, we cannot adjust the relative position between their start point and end point.

We don’t have related API about draw arc, as below is my thinking about how to know whether the mouse draw clockwise or counter-clock, wish that’s helpful.

  1. User click mouse to draw the start point: p1
  2. User move mouse, we get the 2nd point: p2, now we don’t know it’s clockwise or counter-clock
  3. User keep move mouse, now we get the 3rd point: p3, here we can adjust the position between p1, p2 and p3 to know it’s a clockwise or counter-clock arc. if p2 in the left that’s a clockwise, if p2 in the right that’ a counter-clock.

And you can calculate like this post mentioned: https://math.stackexchange.com/questions/274712/calculate-on-which-side-of-a-straight-line-is-a-given-point-located

Pasted image726×300 46 KB

4 User keep move mouse and you can keep calculate that by your logic, then you get the arc you want.

Wish that’s helpful.

Regards,

Ethan

#8

Hi Ethan,

I haven’t had the chance to implement your suggestions, Although, it looks pretty neat and logical, and I am sure it will be helpful as usual.
I will come back to you once I will have the chance to work on it.
Thank You for your quick help, and for paying attention to details.

Thank You,
Ossama

#9

Hi Ossama,

If you have any question please let us know.

We will try our best to help you solve that.

Regards,

Ethan

#10

Hi Ethan,

I have worked out the above query using your guidance and logic, It worked very smooth and nice. You guys are awesome.

Thank You,
Ossama

#11

Hi Ossama,

I am glad to hear that’s helpful.

Any question please let us know.

Regards,

Ethan

#12

Hi Ethan,

I would like to ask know how to find out how to Draw the Arc from a point where the Mouse down moving to another specific point.


I looked to the above link but it does not implement what I am looking for, in specific the method:

protected override string GetWellKnownTextCore(RingOrder outerRingOrder)
{
LineShape line = new LineShape();
line.Vertices.Add(new Vertex(startPoint));

            double radius = Math.Sqrt(Math.Pow(startPoint.X - centerPoint.X, 2) + Math.Pow(startPoint.Y - centerPoint.Y, 2));
            double startAngle = Math.Asin(startPoint.Y / radius);

            for (int i = 1; i <= angle; i++)
            {
                double x = Math.Cos(Math.PI / 180 * i + startAngle) * radius + centerPoint.X;
                double y = Math.Sin(Math.PI / 180 * i + startAngle) * radius + centerPoint.Y;

                line.Vertices.Add(new Vertex(x, y));
            }

            return line.GetWellKnownText();
        }

I can determine the mouse down point and the current point of the mouse move but, it seems my problem is in calculating the angle between the two point shape.

thank You,
Ossama

#13

Hi Ossama,

The topic you mentioned don’t implement “draw” the shape by mouse, it only support draw the shape from WKT.

I don’t think it’s useful for your scenario here.

If you want to draw an Arc by mouse, how you want to draw it?

For example, you maybe want to click one point as the center point, then click the 2nd point as start point and then calculate the arc in mouse move event.

In fact I don’t have good thinking about this, but I think maybe you have some thinking about it.

Regards,

Ethan