Develop Reference

Rescaling Image in Windows Form

I have a set of points I want to show on a 2000x2000 canvas. Here is an example: "61.86, 83 - 61.79, 82.91 - 61.77, 82.77 - 61.92, 82.76 - 61.75, 82.7 - 61.79, 82.58 - 61.85, 82.46 - 61.79, 82.17 - 61.72, 81.88 - 61.61, 81.61 - 61.51, 81.33 - 61.49, 81.02 - 61.33, 80.99 - 61.37, 80.83"
These points are from a 100x100 grid so the first one ought to be in the bottom right quarter of my 2000*2000 canvas.
To do this I have code that finds the biggest X and Y and then rescales.
List<double> MinAndMax(List<Node> spots)
{
List<double> retValues = new List<double>();
double xLowest = spots.Select(s => s.X).Min();
double xHighest = spots.Select(s => s.X).Max();
double xDifference = xHighest - xLowest;
double yLowest = spots.Select(s => s.Y).Min();
double yHighest = spots.Select(s => s.Y).Max();
double yDifference = yHighest - yLowest;
if (xLowest < yLowest)
retValues.Add(xLowest);
else
retValues.Add(yLowest);
if (xHighest < yHighest)
retValues.Add(yHighest);
else
retValues.Add(xHighest);
return retValues;
}
int Rescale(double oldValue, double oldMin, double oldMax, int newMin, int newMax)
{
return Convert.ToInt32(((oldValue - oldMin) * (newMax - newMin) / (oldMax - oldMin)) + newMin);
}
I call it like so:
double zoneMin, zoneMax;
int lowestCanvas = 150, highestCanvas = 1850;
List<Node> path = await PathMaker();
List<double> zoneMinMax = MinAndMax(path);
zoneMin = zoneMinMax[0];
zoneMax = zoneMinMax[1];
foreach (Node spot in path)
{
Point point = new Point();
point.X = Rescale(spot.X, zoneMin, zoneMax, lowestCanvas, highestCanvas);
point.Y = Rescale(spot.Y, zoneMin, zoneMax, lowestCanvas, highestCanvas);
NodeSpot dot = new NodeSpot()
{
Name = spot.Name,
Location = point,
IsInPath = true
};
drawingSurface1.Nodes.Add(dot);
}
drawingSurface1.Invalidate();
Instead of getting my little path nicely spread out, I get this odd clump in the bottom LEFT had quadrant.
I can't see where I am going wrong here. What do I need to do in order to have my 14 points spread out over the canvass?

Your issue is that you are returning a single min value and a single max value. You need separate min and max values for X and Y, as the ranges in each coordinate are different. In your sample data from the question the range of X is [-61.92, 61.86] and the range of Y is [80.83, 83]. Your approach will draw a frame covering [-61.92, -61.92] to [83, 83], with most of the points in one corner.
Your test fails to catch the problem as the X and Y values are the same in the test case. Create a test case where the X values are all negative and the Y values positive, this will show the issue.

let's take [[20, 20], [50, 50], [80, 80]] as an easy exemple.
min and max will be 20 and 80 and wanted scale is 0 to 2000.
for the point [50, 50]
(((oldValue - oldMin) * (newMax - newMin) / (oldMax - oldMin)) + newMin)
gives
((50 - 20) * (2000 - 0) / (80 - 20)) + 0
= 30*2000 / 60
= 1000 (which is half the size of the canvas)
seems coherent so the problem is not coming from the transform function
I suggest trying to debug it by printing the [X, Y] values of the "point" to be sure tho
Also print the min max of the oldScale to be sure this is not the problem

Use the Graphics.PageScale Property
See also Coordinate Systems and Transformations

How to Draw Lines in Xamarin Forms?

I am creating One Cross Platform Application in Xamarin Forms and try to draw lines from 10 to -10 using below code. But the problem is lines are drawn from 10 to 0 only. Why this is happening I don't have any Idea.
int margin = 20;
int steps = 20;
float start = margin;
float end = width - margin;
float dHeigth = heigth - (margin * 4);
float hStep = dHeigth / Convert.ToSingle(steps);
float textMargin = 30;
// draw the line
for (int i = 10; i >= -10; i--)
{
float xpoint = i * hStep + margin;
if (i.IsOdd())
{
canvas.DrawLine(start + textMargin, xpoint, end, xpoint, LineWhitePaint);
}
else
{
decimal dText = 0;
canvas.DrawLine(start + textMargin, xpoint, end, xpoint, LineGreyPaint);
if (i < 0)
dText = i;
else
dText = (10 - i);
string txt = dText.ToString();
canvas.DrawText(txt, start + margin, xpoint + 15, TextStyleFillPaintX);
}
}
I am attaching screen shot of that

For the positive lines, you are drawing 10 - i, which yields 0 for the first iteration, 2 for the third and so on. Regarding this, you can see, that you are beginning to draw the lines from the middle of the canvas. The tenth iteration will draw the topmost line (the one with the 10). Further lines are drawn, but not on the screen.
You can see this, too, when you are writing xPoint to the debug output. As i gets negative, xPoint will, too. To fix this, you'll have to offset xPoint to always draw on screen
float xpoint = i * hStep + margin + steps / 2 * hStep;
Alternatively, you could loop from 20 to 0 and change how the text is generated.
for (int i = 20; i >= 0; i--)
{
var xPoint = i * hStep + margin;
// ...
var displayedText = GetDisplayedText(i, steps);
// ...
}
string GetDisplayedText(int i, int steps)
{
var displayedValue = i > steps / 2
? steps - i
: -i - steps / 2; // I think this should be the formula
return displayedValue.ToString();
}
Remarks: It would even better to encapsulate the concept of the lines, to separate their calculation from draawing them. You could create a factory that generates the correct line based on the index and the number of steps and then only iterate over the Line objects, and draw them by passing the canvas. This would make your code way cleaner and neater.
UPDATE
Since we have been able to clarify the requirements, I will give another shot.
First of all, I'd define methods to transform graph coordinates to canvas coordinates
private SKPoint ToCanvasCoordinates(SKPoint graphCoordinates)
{
var x = Margin + TextMargin + (_canvas.Width - 2*Margin - TextMargin)*graphCoordinates.X;
var y = (MaxY - graphCoordinates.Y)*(_canvas.Height - 2 * Margin)/(MaxY - MinY) + Margin;
return new SKPoint(x,y);
}
private SKPoint GetLegendCoordinates(int i)
{
var x = Margin;
var y = (MaxY - graphCoordinates.Y)*(_canvas.Height - 2 * Margin)/(MaxY - MinY) + Margin + 15;
return new SKPoint(x,y);
}
_canvas is a private member field in this case, Margin, MaxY and MinY are properties. I've assumed the min of x being 0 and the max bein 1.
Now you can draw your lines like
for(int i = -1; i <= 10; i++)
{
var lineStart = ToCanvasCoordinates(new SKPoint(0, i));
var lineEnd = ToCanvasCoordinates(new SKPoint(1, i));
canvas.DrawLine(lineStart, lineEnd, LineGreyPaint);
var textPosition = GetLegendCoordinates(i);
canvas.DrawText(i.ToString(), textPosition, TextStyleFillPaintX);
}
Furthermore, if you'd like to draw a line between two of the grid lines, you can use the following methods
private void DrawDataLine(SKPoint start, SKPoint end, SKPaint paint)
{
var startTransformed = ToCanvasCoordinates(start);
var endTransformed = ToCanvasCoordinates(end);
_canvas.DrawLine(startTransformed, endTransformed, paint);
}
private void DrawData(SKPaint paint)
{
for(int i=1; i<_data.Length; i++)
{
DrawDataLine(new SKPoint(data[i-1].X, data[i-1].Y), new SKPoint(data[i].X, data[i].Y)); // given that the objects in _data have the properties X and Y
}
}

How do I find 10 elements by longitude and latitude in 1 km radius using LINQ?

In my case on picture firstPoint0 - as example my first point and center of the circle, relative this point confine screenings by radius 1 km. I need to show just all points in my radius, others points thisPoint not show by linq query.
var flats = context.Flats;
var first = flats.FirstOrDefault(x => x.Lattitude && x.Longitude);
var getAllInRadius = flats.Where(? take points where distance <= 1 km)

Just use the Haversine formula that returns the great-circle distance between two points on a sphere:
// Returns the great circle distance between two flats, as meters
public static double DistanceBetweenFlats(Flat flat1, Flat flat2)
{
const int EarthRadius = 6371;
double latitude = ToRadian(flat2.Latitude - flat1.Latitude);
double longitude = ToRadian(flat2.Longitude - flat1.Longitude);
double tmp = (Math.Sin(latitude / 2) * Math.Sin(latitude / 2)) +
(Math.Cos(ToRadian(flat1.Latitude)) * Math.Cos(ToRadian(flat2.Latitude)) *
Math.Sin(longitude / 2) * Math.Sin(longitude / 2));
double c = 2 * Math.Asin(Math.Min(1, Math.Sqrt(tmp)));
double d = EarthRadius * c;
return d * 1000;
}
...
var centerFlat = ...;
var getAllInRadius = flats.Where(z => DistanceBetweenFlats(centerFlat, z) <= 1000);
Of course all of this assumes you're using LINQ in memory (not LINQ to Entities). If it's not the case, you'll have to use spatial queries.

Drawing triangles given user input

So I'm trying to make a Program that will draw a triangle given some user input. The variables that the user provides are angleA, angleB, andleC, and the corresponding sides. The code I have set up to find the three points of the angle is as follows.
double angle_A = double.Parse(angleA.Text);
double angle_B = double.Parse(angleB.Text);
double angle_C = double.Parse(angleC.Text);
double side_A = double.Parse(sideA.Text);
double side_B = double.Parse(sideB.Text);
double side_C = double.Parse(sideC.Text);
double triangleHeight = Area * 2 / (double.Parse(sideB.Text));
double height = canvas.Height;
double width = canvas.Width;
int aX, aY, bX, bY, cX, cY;
aY = Convert.ToInt32(canvas.Height - triangleHeight / 2);
if (angle_A <= 90 && angle_C <= 90)
{
aX = Convert.ToInt32((width - side_B) / 2);
}
else if (angle_A > 90)
{
double extraLength = Math.Sqrt(Math.Pow(side_C, 2) - Math.Pow(triangleHeight, 2));
aX = Convert.ToInt32(width - ((width - (side_B + extraLength)) / 2) + side_B);
}
else if (angle_C > 90)
{
double extraLength = Math.Sqrt(Math.Pow(side_A, 2) - Math.Pow(triangleHeight, 2));
aX = Convert.ToInt32((width - side_B + extraLength) / 2);
}
else
{
aX = 0;
MessageBox.Show("ERROR: No such triangle exists", "ERROR:");
}
cX = aX + Convert.ToInt32(side_B);
cY = aY;
bX = Convert.ToInt32(side_A * Math.Cos(Math.PI * angle_C / 180) + cX);
bY = Convert.ToInt32(side_A * Math.Sin(Math.PI * angle_C / 180) - cY);
Point pointA = new Point(aX, aY);
Point pointB = new Point(bX, bY);
Point pointC = new Point(cX, cY);
Point[] points = new Point[3] { pointA, pointB, pointC };
return points;
This returns the three points that the paint method should use to draw the triangle. However, when I insert the values, the triangle it draws looks nothing like the triangle I have described with the user input. Any thoughts on why this is? Thanks in advance.
P.S. The error is not in my code, as it gives me no errors and does not crash. It is strictly a math error that I have not been able to locate.

I imagine the triangle ABC with corners A and C along the base line with A to the left and C to the right, and B somewhere above them. Side A is the side opposite corner A, and so on.
As Damien_the_Unbeliever says, you should only allow input of, say, side B, side C and angle of corner A. Validate that A is not over 180 degrees. Start off with A at the origin, so we know straight away that xA = 0, yA = 0, xC = length of side B, yC=0, xB = side C * cos A, and yB = side C * sin A. I believe this works even if A is over 90 degrees, you do get a negative value for xB but don't worry, continue anyway!
Now all you have to do is centre the triangle on the canvas. I don't understand where you are getting Area from. It makes no sense to calculate the triangle's height from its area. The triangle height is yB, you can calculate the offset you need to centre it vertically as you know, so long as yB <= height. Add the same y offset to all the points.
The horizontal offset is a bit more complicated! If xB is negative, I would add an offset to all the x values to bring xB to 0, this positions your triangle at the left side of the canvas, and its width is given by the new xC. If xB is non-negative, the width is the maximum of xC or xB. Then you can calculate the x offset from the width as you know.
I have had time to do some of the code, for example values; this will draw a triangle but not yet centre it:
int sideB = 100;
int sideC = 143;
int angleA = 28;
double angleARadians = Math.PI * angleA / 180.0;
int[] xs = new int[3];
int[] ys = new int[3];
//1st corner is at the origin
xs[0] = 0; ys[0] = 0;
//Then the third corner is along the x axis from there to the length of side B
xs[2] = sideB; ys[2] = 0;
// The second corner is up a bit above the x axis. x could be negative.
// Note, when you draw it, the y axis extends downwards, so a positive y value will be drawn below the x axis.
xs[1] = (int)Math.Round(sideC * Math.Cos(angleARadians));
ys[1] = (int)Math.Round(sideC * Math.Sin(angleARadians));
//If Bx is negative, move all the points over until it's 0
if (xs[1] < 0)
{
int zeroX = xs[1] * -1;
for (int i = 0; i < 3; i++)
{
xs[i] += zeroX;
}
}
// Now centre the triangle on the canvas.
// Firstly find the width of the triangle. Point B could be to the left of A, or between A and C, or to the right of C.
// So the left most point of the triangle is the minimum of A or B, and the right most point is the maximum of B or C.
int minX = Math.Min(xs[0],xs[1]);
int maxX = Math.Max(xs[2], xs[1]);
//The height of the triangle is yB.
int offsetX = (panCanvas.Width - (maxX - minX)) / 2;
int offsetY = (panCanvas.Height - ys[1]) / 2;
//offset all the points by the same amount, to centre the triangle.
for (int i = 0; i < 3; i++)
{
xs[i] += offsetX;
ys[i] += offsetY;
}

Given the three sides of a triangle a, b, and c the coordinates of the vertices are
P=[0,0]
Q=[a,0]
R=[(a^2+c^2-b^2)/(2*a), sqrt(c^2*(2*(a^2+b^2)-c^2)-(a+b)^2*(a-b)^2)/(4*a^2))]
Example, a=6, b=4 and c=8
P=[0,0]
Q=[6,0]
R=[7,√15]

How to hit test shapes in Silverlight?

I need the ability to determine which Shape a given point falls within. There will be overlapped shapes and I need to find the Shape with the smallest area. For example, given the Shapes and points illustrated in the image below the following would be true:
Point 3 - collides with star
Point 2 - collides with diamond
Point 1 - collides with circle
Given this, I would like to know if there is a built in way to do what is needed.

If you are drawing these shapes manually, you could do a second drawing pass into a separate buffer, and instead of drawing the shape, you write an ID into the buffer if the pixel is within the shape. Then your hit test just has to index into that buffer and retrieve the ID. You would get to re-use your drawing code completely, and it scales much better when you have more shapes, vertices, and hits to test.

I've arrived at a solution that meets the requirements, still interested in hearing if there is a better way of doing this. My approach is as follows: do a hit-test by bounding box, then a geometric hit test based on the type of geometry.
For Polygons, I've adapted the C code mentioned http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes /pnpoly.html to work in C#.
int pnpoly(int nvert, float *vertx, float *verty, float testx, float testy)
{
int i, j, c = 0;
for (i = 0, j = nvert-1; i < nvert; j = i++) {
if ( ((verty[i]>testy) != (verty[j]>testy)) &&
(testx < (vertx[j]-vertx[i]) * (testy-verty[i]) / (verty[j]-verty[i]) + vertx[i]) )
c = !c;
}
return c;
}
For Ellipses, I've adaptated this code: http://msdn.microsoft.com/en-us/library/aa231172%28v=vs.60%29.aspx
BOOL CCircCtrl::InCircle(CPoint& point)
{
CRect rc;
GetClientRect(rc);
GetDrawRect(&rc);
// Determine radii
double a = (rc.right - rc.left) / 2;
double b = (rc.bottom - rc.top) / 2;
// Determine x, y
double x = point.x - (rc.left + rc.right) / 2;
double y = point.y - (rc.top + rc.bottom) / 2;
// Apply ellipse formula
return ((x * x) / (a * a) + (y * y) / (b * b) <= 1);
}