You should check out ArcShape. This Object2D can be created. When put in the Paint event of a Canvas, it will show up on that canvas when the Paint event occurs.
I have written a simple Desktop project to illustrate how this is done.
The Opening event:
Self.someArc = New ArcShape // property of window
Self.someLine = New CurveShape // property of window
Self.pointA = New Point // property of window
Self.pointB = New Point // property of window
pointA.X = 80
pointA.Y = 300
pointB.X = 200
pointB.Y = 100
Self.UpdateGraphic
Window Method __ UpdateGraphic:
Const PI As Double = 3.1416
Var theAngle As Double
theAngle = ATan((pointB.Y - pointA.Y) / (pointB.X - pointA.X)) + PI
someArc.StartAngle = theAngle
someArc.ArcAngle = PI // half a circle in radians
someArc.BorderColor = Color.Blue
someArc.BorderOpacity = 100
someArc.BorderWidth = 1
someArc.FillOpacity = 0
someArc.X = (pointA.X + pointB.X) / 2
someArc.Y = (pointA.Y + pointB.Y) / 2
someArc.Width = pointA.DistanceTo(pointB) // Width and Height should be equal if want perfect circle arc.
someArc.Height = pointA.DistanceTo(pointB)
// line connecting the two points.
someLine.X = pointA.X
someLine.Y = pointA.Y
someLine.X2 = pointB.X
someLine.Y2 = pointB.Y
someArc.ArcAngle = 3.14
someLine.BorderColor = Color.Red
someLine.BorderOpacity = 100
someLine.BorderWidth = 1
someLine.FillOpacity = 0
The only trigonometry requires is getting the StartAngle. This is derived from the arctangent of the line connecting the two points with a horizontal line. The example code using this in the UpdateGraphic method.
The Paint event of the canvas is simple:
g.DrawObject(Self.someArc)
g.DrawObject(Self.someLine) // line between the two points
The code of the Push Button is provided to see how the graphic is updated when you change the (move) one of the Points. In this case the pointB position (X & Y value) is changed, The code here is placed in the Pressed event of the PushButton. Of course, in your case, the point position is being changed my dragging so this code would have to placed in the appropriate location to get the desired effect.
pointB.X = pointB.X + 40
pointB.Y = pointB.Y + 30
Self.UpdateGraphic
// Show the change
Self.Canvas1.Refresh(False)
If you play with this code, I believe you will be able to figure out what you need.
pointA and pointB are just the centers of the two small rectangles that you have in your diagram. It is not hard to add these graphics to you canvas. (see: RectShape)
After clicking on the pbMovePoint button.
I work on something pretty hard before I ask for help. But am as they say… Over this. haha
