Introduction
This article presents a helper class which transforms coordinates. It allows to work with an absolute set of coordinates in .NET graphics.
Background
This is a beginner-level article. There are other articles which offer elaborated custom objects to display graphics in WPF. This one just simplifies working with absolute positions compared to the real locations that are dependent on the size of the container object (the example uses a WPF's Canvas object as the container).
Using the code
I packed the coordinate linear transformation inside the class Coord. The class' constructor takes in the container dimensions (I use a Canvas object in the example) and the range of the "absolute" dimensions (these are the ones dictated by the business rules).
Every time you need to set/get the location of a point inside of the container, just make the conversion by means of these Coord methods:
double GetR(float p_X) (gets the horizontal position)
double GetL(float p_Y) (gets the vertical position)
double GetDist(double p_Dist) (distance adjustment, see below)
Let's say you want to display a point (actually, that would be a circle of tiny radius in WPF) inside a Canvas object (container).
Let's assume you are working with "absolute" coordinates (those dictated by your specific business rules) ranging from Xmin to Xmax on the horizontal axis and Ymin to Ymax on the vertical axis. Then, also assume that you are constrained to show your graphics inside a Canvas object whose width is Rmax and whose height is Lmax.
We need to transform the absolute coordinate values to values ranging from 0 to Rmax on the horizontal and from 0 to Lmax on the vertical.
For the sake of the example, let's set the values as:
Xmin = 0;Xmax = 100;
Ymin = 0;Ymax = 100;
and from the Canvas object dimensions in the example, we get:
Rmin = 0;Rmax = 300;
Lmin = 0;Lmax = 300;
Actually, any object placed inside the container will be located referring to the container's left upper corner, which leaves us with an "inverted" vertical axis; to "fix" vertical values, just set this instead:
Lmin = 300; Lmax = 0;
First, we would create an instance of the Coord class with this call:
Coord l_Coord = new Coord(Rmax, Rmin, Lmax, Lmin, Xmax, Xmin, Ymax, Ymin);
or fill it directly with values:
Coord l_Coord = new Coord(300, 0, 0, 300, 100, 0, 100, 0);
Then, when it comes the time to address the container's "real" coordinate values, we use:
Line 1: Ellipse l_e = new Ellipse();
Line 2: l_e.SetValue(Canvas.LeftProperty, l_Coord.GetR(l_PointX));
Line 3: l_e.SetValue(Canvas.TopProperty, l_Coord.GetL(l_PointY));
Line 4: l_e.Width = l_Coord.GetDist(l_Radius);
Line 5: l_e.Height = l_Coord.GetDist(l_Radius);
Line 6: l_e.Fill = new SolidColorBrush(Colors.Red);
Line 7: l_e.ToolTip =
String.Format("Located at: ({0},{1})", l_PointX, l_PointY);
Line 8: this.canvas1.Children.Add(l_e);
In the example, I use l_Radius = 5 as the circle "absolute" radius.
Please note you need to adjust the distance as well; I do that in lines 4 and 5 in the code above.
