Develop Reference

Determining if a Line intersects with a rotated rectangle on a canvas

I have managed to find code that determines if a Line intersects with a rectangle. My problem is when the Rectangle is rotated. I have looked hi and low to find code that will give me the coordinates of the corners of the rectangle after the transform is performed with no luck. My rectangle when it is rotated is rotated around CenterX and CenterY of 0,0.
I'd appreciate any code that you may have that does this.
Thanks!
More information:
I am working on a program that I want to be able to select one or more rectangles on a canvas by drawing a line. The rectangles can be rotated.
I have tried the following code. The second function works properly for non rotated rectangles but not for rotated rectangles.:
public bool AdjustedIntersects(FrameworkElement elem, Line line)
{
double x = Canvas.GetLeft(elem);
double y = Canvas.GetTop(elem);
double X = x * Math.Cos(((RotateTransform)elem.RenderTransform).Angle)
- y * Math.Sin(((RotateTransform)elem.RenderTransform).Angle);
double Y = x * Math.Sin(((RotateTransform)elem.RenderTransform).Angle)
+ y * Math.Cos(((RotateTransform)elem.RenderTransform).Angle);
x = Canvas.GetLeft(elem) + elem.Width;
y = Canvas.GetTop(elem) + elem.Height;
double X2 = x * Math.Cos(((RotateTransform)elem.RenderTransform).Angle)
- y * Math.Sin(((RotateTransform)elem.RenderTransform).Angle);
double Y2 = x * Math.Sin(((RotateTransform)elem.RenderTransform).Angle)
+ y * Math.Cos(((RotateTransform)elem.RenderTransform).Angle);
return SegmentIntersectRectangle(X, Y,X2,Y2,
line.X1, line.Y1, line.X2, line.Y2);
}
public bool SegmentIntersectRectangle(
double rectangleMinX,
double rectangleMinY,
double rectangleMaxX,
double rectangleMaxY,
double p1X,
double p1Y,
double p2X,
double p2Y)
{
// Find min and max X for the segment
double minX = p1X;
double maxX = p2X;
if (p1X > p2X)
{
minX = p2X;
maxX = p1X;
}
// Find the intersection of the segment's and rectangle's x-projections
if (maxX > rectangleMaxX)
{
maxX = rectangleMaxX;
}
if (minX < rectangleMinX)
{
minX = rectangleMinX;
}
if (minX > maxX) // If their projections do not intersect return false
{
return false;
}
// Find corresponding min and max Y for min and max X we found before
double minY = p1Y;
double maxY = p2Y;
double dx = p2X - p1X;
if (Math.Abs(dx) > 0.0000001)
{
double a = (p2Y - p1Y) / dx;
double b = p1Y - a * p1X;
minY = a * minX + b;
maxY = a * maxX + b;
}
if (minY > maxY)
{
double tmp = maxY;
maxY = minY;
minY = tmp;
}
// Find the intersection of the segment's and rectangle's y-projections
if (maxY > rectangleMaxY)
{
maxY = rectangleMaxY;
}
if (minY < rectangleMinY)
{
minY = rectangleMinY;
}
if (minY > maxY) // If Y-projections do not intersect return false
{
return false;
}
return true;
}

A polygon intersects with a line if one of lines of the poligon overlap with the line. Then try this:
Find four conners of the rectangle by the above way.
Check if one of lines make from sequence of conners overlap with the line. I have a ideal for it:
private bool IsStraightLineOverlap(System.Windows.Shapes.Line line1, Line line2)
{
var line1Min_X = Math.Min(line1.X1, line1.X2);
var line1Max_X = Math.Max(line1.X1, line1.X2);
var line1Min_Y = Math.Min(line1.Y1, line1.Y2);
var line1Max_Y = Math.Max(line1.Y1, line1.Y2);
var line2Min_X = Math.Min(line2.X1, line2.X2);
var line2Max_X = Math.Max(line2.X1, line2.X2);
var line2Min_Y = Math.Min(line2.Y1, line2.Y2);
var line2Max_Y = Math.Max(line2.Y1, line2.Y2);
var isOverlap_X = (line1Min_X <= line2Max_X && line1Max_X >= line2Min_X);
var isOverlap_Y = (line1Min_Y <= line2Max_Y && line1Max_Y >= line2Min_Y);
return isOverlap_X && isOverlap_Y;
}

In our game suite I have to find rotated points for various purposes.
Here's an extension method:
public static class PointExtension
{
public static Point GetRotatedPoint(this Point point, Point centerPoint, double angleInDegrees)
{
double angleInRadians = angleInDegrees * (Math.PI / 180.0);
double cosTheta = Math.Cos(angleInRadians);
double sinTheta = Math.Sin(angleInRadians);
return new Point
{
X =
(int)
(cosTheta * (point.X - centerPoint.X) -
sinTheta * (point.Y - centerPoint.Y) + centerPoint.X),
Y =
(int)
(sinTheta * (point.X - centerPoint.X) +
cosTheta * (point.Y - centerPoint.Y) + centerPoint.Y)
};
}
}
I also have to work out the cells on a grid that a line passes through.
To do this I use a bresenham line algorithm.
You can google this and find various implementations.
Here's mine:
public static IEnumerable<Point> GetOrderedPointsOnLine(int x0, int y0, int x1, int y1)
{
bool steep = Math.Abs(y1 - y0) > Math.Abs(x1 - x0);
if (steep)
{
Swap<int>(ref x0, ref y0);
Swap<int>(ref x1, ref y1);
}
int dx = Math.Abs(x1 - x0);
int dy = Math.Abs(y1 - y0);
int error = (dx / 2);
int ystep = (y0 < y1 ? 1 : -1);
int xstep = (x0 < x1 ? 1 : -1);
int y = y0;
for (int x = x0; x != (x1 + xstep); x += xstep)
{
yield return new Point((steep ? y : x), (steep ? x : y));
error = error - dy;
if (error < 0)
{
y += ystep;
error += dx;
}
}
yield break;
}
The outline of a rectangle is of course 4 lines.
There is an edge case where both an edge and the line can be a variation of 4 degrees and intersection exactly picks cells don't match.
To obviate that you could use a bresenham variation which picks both cells the line partially passes through.
Or you can build two geometries and see if you get anything overlaps when you use the wpf library to detect intersection.
I'm not sure what happens if you apply a transform to a geometry and then use geometry.fillcontainswithdetail
https://learn.microsoft.com/en-us/dotnet/api/system.windows.media.geometry.fillcontainswithdetail?redirectedfrom=MSDN&view=net-5.0#overloads
There's also combinedgeometry to consider.
Pick the right options and it'll only give you what overlaps between 2 geometries.
I use neither because in game has to be very fast.
For pre game calculations I render offscreen and examine the bytes of the image I get. This is the fastest simplest way I've found to see which cells (px) an irregular shape occupies.
And another way you could approach this.

Solution 1: break the problem down into something that is easier to solve:
Pick any edge on the rectangle, represented by points P1 and P2.
Translate both the points in your rectangle and the points that define your line by -P1, so that the P1 point is now at the origin.
Calculate the angle of your edge i.e. Math.Atan2(deltaY, deltaX).
Rotate the points for both the rectangle and line in the opposite direction, so that you now have an axis-aligned rectangle.
Do your line/rectangle hit test between these new primitives, using the algorithm you already have for axis-aligned rectangles.
If you need the actual point of intersection in proper world space coordinates then rotate it forward by the angle and translate by +P1.
Solution 2: test the line against each line that forms the rectangle, your problem is now 4 line-to-line intersection tests.

Disclaimer: this is not c#. I only know javascript but the math should be the same.
The way I attack this is by creating an array for my shape that I use to store each vertex. I then use those points to determine where the objects boundaries are. I am assuming that translate and rotate work the same in c# and the objects coordinate are always axis-aligned.
When I draw my rectangle I draw it with the x (left) as -width/2 and y (top) as -height/2. This is because I am going to use translate to position it where I want it and also allow it to rotate from the center.
ctx.save();
ctx.translate(this.x, this.y)
ctx.rotate(this.rotation);
ctx.fillStyle = this.color;
ctx.fillRect(-this.width/2, -this.height/2, this.width, this.height)
ctx.restore();
I don't know if c# uses save and restore but it would be the same as just translating and rotating it back after i.e.
ctx.translate(this.x, this.y);
ctx.rotate(this.rotation);
ctx.fillStyle = this.color;
ctx.fillRect(-this.width/2, -this.height/2, this.width, this.height);
ctx.rotate(-this.rotation);
ctx.translate(-this.x, -this.y)
Also you'll notice in the snippet code that I created an array to store my x and y coordinates of each vertex
this.vertices = [];
for (let i = 0; i < 4; i++) {
//initially set to (0, 0) and updated in updateVertices()
this.vertices.push({ x: 0, y: 0 });
}
This is part of my rectangle object by the array could be global also.
The part that really matters is the math associated to updating the position of the vertices. In this snippet I use a function called updateVertices(). In this function I need to first calculate the sin and cos based on the current rotation.
let cos = Math.cos(this.rotation); //passing in radians in JS
let sin = Math.sin(this.rotation); //passing in radians in JS
Once I have that I just update the array of vertices that I created
//update Top Left Corner
this.vertices[0].x =
(this.x - this.centerX) * cos -
(this.y - this.centerY) * sin +
(this.centerX - this.width / 2);
this.vertices[0].y =
(this.x - this.centerX) * sin +
(this.y - this.centerY) * cos +
(this.centerY - this.height / 2);
Do that with all four corners. The math is slightly different for each vertex.
That's it. You have an array with all 4 vertices and can use them how you want. In this example I iterate over them passing two (adjacent) at time to my intersectLines() function to see if my vector lines intersects. Since I am testing 4 edges I use a loop to test all four sides against my vector, I do this in my passToIntersectFunction() function.
In this snippet you can use the mouse to move the vector around and see how the intersect points move.
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 400;
let ptX, ptY;
let intersectPoints = [];
let mouse = {
x: null,
y: null
};
canvas.addEventListener("mousemove", (e) => {
mouse.x = e.x - canvas.getBoundingClientRect().x;
mouse.y = e.y - canvas.getBoundingClientRect().y;
});
class Square {
constructor() {
this.x = 100;
this.y = 100;
this.width = 50;
this.height = 50;
this.centerX = this.x + this.width / 2;
this.centerY = this.y + this.height / 2;
this.color = "red";
this.angle = 0;
this.rotation = (this.angle * Math.PI) / 180; //convert to rads
//used to store all four vertices
this.vertices = [];
for (let i = 0; i < 4; i++) {
//initially set to (0, 0) and updated in updateVertices()
this.vertices.push({ x: 0, y: 0 });
}
}
draw() {
this.angle += 0.5;
this.rotation = (this.angle * Math.PI) / 180;
ctx.translate(this.x, this.y);
ctx.rotate(this.rotation);
ctx.fillStyle = this.color;
ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height);
ctx.rotate(-this.rotation);
ctx.translate(-this.x, -this.y);
}
drawIntersectPoint() {
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(ptX, ptY, 3, 0, Math.PI * 2);
ctx.fill();
}
drawVertices() {
ctx.fillStyle = "blue";
ctx.beginPath();
for (let i = 0; i < this.vertices.length; i++) {
ctx.arc(this.vertices[i].x, this.vertices[i].y, 3, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
}
}
updateVertices() {
let cos = Math.cos(this.rotation);
let sin = Math.sin(this.rotation);
//update Top Left Corner
this.vertices[0].x =
(this.x - this.centerX) * cos -
(this.y - this.centerY) * sin +
(this.centerX - this.width / 2);
this.vertices[0].y =
(this.x - this.centerX) * sin +
(this.y - this.centerY) * cos +
(this.centerY - this.height / 2);
//updates Top Right Corner
this.vertices[1].x =
(this.x + this.width - this.centerX) * cos -
(this.y - this.centerY) * sin +
(this.centerX - this.width / 2);
this.vertices[1].y =
(this.x + this.width - this.centerX) * sin +
(this.y - this.centerY) * cos +
(this.centerY - this.height / 2);
//updates Bottom Right Corner
this.vertices[2].x =
(this.x + this.width - this.centerX) * cos -
(this.y + this.height - this.centerY) * sin +
(this.centerX - this.width / 2);
this.vertices[2].y =
(this.x + this.width - this.centerX) * sin +
(this.y + this.height - this.centerY) * cos +
(this.centerY - this.height / 2);
//updates Bottom Left Corner
this.vertices[3].x =
(this.x - this.centerX) * cos -
(this.y + this.height - this.centerY) * sin +
(this.centerX - this.width / 2);
this.vertices[3].y =
(this.x - this.centerX) * sin +
(this.y + this.height - this.centerY) * cos +
(this.centerY - this.height / 2);
}
}
let square = new Square();
class Vector {
constructor() {
this.x1 = 200;
this.y1 = 100;
this.x2 = mouse.x;
this.y2 = mouse.y;
}
draw() {
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.moveTo(this.x1, this.y1);
ctx.lineTo(this.x2, this.y2);
ctx.stroke();
}
updateVector() {
this.x2 = mouse.x;
this.y2 = mouse.y;
this.draw();
}
}
let vector = new Vector();
function intersectLines(coord1, coord2, vector) {
//this if statement just keeps the array from constantly growing
if (intersectPoints.length > 2) {
intersectPoints.shift();
}
let x1 = coord1.x;
let x2 = coord2.x;
let y1 = coord1.y;
let y2 = coord2.y;
let x3 = vector.x1;
let x4 = vector.x2;
let y3 = vector.y1;
let y4 = vector.y2;
let d = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
if (d == 0) {
return;
}
let t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / d;
let u = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / d;
if (t > 0 && t < 1 && u > 0) {
intersectPoints.push({ x: x1 + t * (x2 - x1), y: y1 + t * (y2 - y1) });
}
return;
}
function passToIntersectFunction() {
for (let i = 0; i < square.vertices.length; i++) {
intersectLines(
square.vertices[i],
square.vertices[i + 1] ?? square.vertices[0],
vector
);
}
}
function drawIntersectPoints() {
for (let i = 0; i < intersectPoints.length; i++) {
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(intersectPoints[i].x, intersectPoints[i].y, 3, 0, Math.PI * 2);
ctx.fill();
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
square.draw();
square.updateVertices();
square.drawIntersectPoint();
square.drawVertices();
vector.updateVector();
drawIntersectPoints();
passToIntersectFunction();
requestAnimationFrame(animate);
}
animate();
<canvas id="canvas"></canvas>
Sorry its not c# but maybe it can help.

C# GMap: How to draw a 120 degree beam angle on a map

how can I add a polygon to the map as in the picture below? From a certain point of coordinates should open a polygon long, for example, 1 kilometer and a 120-degree opening angle.
https://i.ibb.co/ZLKgvJs/image.png
private void CreateCircle(Double lat, Double lon, double radius, int ColorIndex)
{
GMapOverlay markers = new GMapOverlay(mygmap, "markers");
PointLatLng point = new PointLatLng(lat, lon);
int segments = 1080;
List<PointLatLng> gpollist = new List<PointLatLng>();
for (int i = 0; i < segments; i++)
{
gpollist.Add(FindPointAtDistanceFrom(point, i * (Math.PI / 180), radius / 1000));
}
GMapPolygon polygon = new GMapPolygon(gpollist, "Circle");
switch (ColorIndex)
{
case 1:
polygon.Fill = new SolidBrush(Color.FromArgb(80, Color.Red));
break;
case 2:
polygon.Fill = new SolidBrush(Color.FromArgb(80, Color.Orange));
break;
case 3:
polygon.Fill = new SolidBrush(Color.FromArgb(20, Color.Aqua));
break;
default:
MessageBox.Show("No search zone found!");
break;
}
polygon.Stroke = new Pen(Color.Red, 1);
markers.Polygons.Add(polygon);
mygmap.Overlays.Add(markers);
}
public static GMap.NET.PointLatLng FindPointAtDistanceFrom(GMap.NET.PointLatLng startPoint, double initialBearingRadians, double distanceKilometres)
{
const double radiusEarthKilometres = 6371.01;
var distRatio = distanceKilometres / radiusEarthKilometres;
var distRatioSine = Math.Sin(distRatio);
var distRatioCosine = Math.Cos(distRatio);
var startLatRad = DegreesToRadians(startPoint.Lat);
var startLonRad = DegreesToRadians(startPoint.Lng);
var startLatCos = Math.Cos(startLatRad);
var startLatSin = Math.Sin(startLatRad);
var endLatRads = Math.Asin((startLatSin * distRatioCosine) + (startLatCos * distRatioSine * Math.Cos(initialBearingRadians)));
var endLonRads = startLonRad + Math.Atan2(Math.Sin(initialBearingRadians) * distRatioSine * startLatCos, distRatioCosine - startLatSin * Math.Sin(endLatRads));
return new GMap.NET.PointLatLng(RadiansToDegrees(endLatRads), RadiansToDegrees(endLonRads));
}
public static double DegreesToRadians(double degrees)
{
const double degToRadFactor = Math.PI / 180;
return degrees * degToRadFactor;
}
public static double RadiansToDegrees(double radians)
{
const double radToDegFactor = 180 / Math.PI;
return radians * radToDegFactor;
}
My code can only draw a circle. Can it be changed so that it can draw a polygon from a certain point of coordinates with an indication of the direction, distance of drawing and the angle of aperture?

Try to break your circle into 20,30,40 or 50 points, display only the points you want and draw a polyline for each 2 points
int n = 20; //number of points
for(i = 0; i<n ;i++)
{
angle = i * (360/n);
point.x = x_center + r * cos(angle);
point.y = y_center + r * sin(angle);
}

How to find center point if startangle and sweep angle is changed

In android , I have drawn an arc based on startangle, sweepangle and radius. Let width be 400 and height be 500 as rectangle bounds in which radius is calculated as
var radius = Math.Min(Width,Height)/2;
Also if centre is calculated as
var x = (float)(Width * 0.5);
var y = (float)(Height * 0.5);
var centre = new PointF(x,y);
If above centre value is used, centre remains same for all start angle and sweepangle for rectangle. I need to change the centre if startangle and sweep angle changes
In the below image, rectangle bounds is 400,500 and the startangle is 0 and sweepangle is 360
If I change start angle to 180 and sweepangle to 180, centre remains same
I need the below image output,if I change startangle and sweepangle based on circle bounds, centre point should vary
I have done calculations for the above ,
private SystemPointF GetActualCenter(float x, float y, float radius)
{
SystemPointF actualCenter = new SystemPointF(x, y);
double startAngle1 = GetWrapAngle(StartAngle, -630, 630);
double endAngle1 = GetWrapAngle(EndAngle, -630, 630);
float[] regions = new float[] { -630, -540, -450, -360, -270, -180, -90, 0, 90, 180, 270, 360, 450, 540, 630 };
List<int> region = new List<int>();
if (startAngle1 < endAngle1)
{
for (int i = 0; i < regions.Length; i++)
{
if (regions[i] > startAngle1 && regions[i] < endAngle1)
region.Add((int)((regions[i] % 360) < 0 ? (regions[i] % 360) + 360 : (regions[i] % 360)));
}
}
else
{
for (int i = 0; i < regions.Length; i++)
{
if (regions[i] < startAngle1 && regions[i] > endAngle1)
region.Add((int)((regions[i] % 360) < 0 ? (regions[i] % 360) + 360 : (regions[i] % 360)));
}
}
double startRadian = 2 * Math.PI * (startAngle1) / 360;
double endRadian = 2 * Math.PI * (endAngle1) / 360;
SystemPointF startPoint = new SystemPointF((float)(x + radius * Math.Cos(startRadian)),
(float)(y + radius * Math.Sin(startRadian)));
SystemPointF endPoint = new SystemPointF((float)(x + radius * Math.Cos(endRadian)),
(float)(y + radius * Math.Sin(endRadian)));
switch (region.Count)
{
case 0:
float longX = Math.Abs(x - startPoint.X) > Math.Abs(x - endPoint.X) ? startPoint.X : endPoint.X;
float longY = Math.Abs(y - startPoint.Y) > Math.Abs(y - endPoint.Y) ? startPoint.Y : endPoint.Y;
SystemPointF midPoint = new SystemPointF(Math.Abs((x + longX)) / 2, Math.Abs((y + longY)) / 2);
actualCenter.X = x + (x - midPoint.X);
actualCenter.Y = y + (y - midPoint.Y);
break;
case 1:
SystemPointF point1 = new SystemPointF(), point2 = new SystemPointF();
float maxRadian = (float)(2 * Math.PI * region[0] / 360);
SystemPointF maxPoint = new SystemPointF((float)(x + radius * Math.Cos(maxRadian)),
(float)(y + radius * Math.Sin(maxRadian)));
switch (region[0])
{
case 270:
point1 = new SystemPointF(startPoint.X, maxPoint.Y);
point2 = new SystemPointF(endPoint.X, y);
break;
case 0:
case 360:
point1 = new SystemPointF(x, endPoint.Y);
point2 = new SystemPointF(maxPoint.X, startPoint.Y);
break;
case 90:
point1 = new SystemPointF(endPoint.X, y);
point2 = new SystemPointF(startPoint.X, maxPoint.Y);
break;
case 180:
point1 = new SystemPointF(maxPoint.X, startPoint.Y);
point2 = new SystemPointF(x, endPoint.Y);
break;
}
midPoint = new SystemPointF((point1.X + point2.X) / 2, (point1.Y + point2.Y) / 2);
actualCenter.X = x + ((x - midPoint.X) >= radius ? 0 : (x - midPoint.X));
actualCenter.Y = y + ((y - midPoint.Y) >= radius ? 0 : (y - midPoint.Y));
break;
case 2:
float minRadian = (float)(2 * Math.PI * region[0] / 360);
maxRadian = (float)(2 * Math.PI * (region[1]) / 360);
maxPoint = new SystemPointF((float)(x + radius * Math.Cos(maxRadian)),
(float)(y + radius * Math.Sin(maxRadian)));
SystemPointF minPoint = new SystemPointF((float)(x + radius * Math.Cos(minRadian)),
(float)(y + radius * Math.Sin(minRadian)));
if (region[0] == 0 && region[1] == 90 || region[0] == 180
&& region[1] == 270)
point1 = new SystemPointF(minPoint.X, maxPoint.Y);
else
point1 = new SystemPointF(maxPoint.X, minPoint.Y);
if (region[0] == 0 || region[0] == 180)
point2 = new SystemPointF(GetMinMaxValue(startPoint, endPoint, region[0]),
GetMinMaxValue(startPoint, endPoint, region[1]));
else
point2 = new SystemPointF(GetMinMaxValue(startPoint, endPoint, region[1]),
GetMinMaxValue(startPoint, endPoint, region[0]));
midPoint = new SystemPointF(Math.Abs(point1.X - point2.X) / 2 >= radius ? 0 : (point1.X + point2.X) / 2,
Math.Abs(point1.Y - point2.Y) / 2 >= radius ? 0 : (point1.Y + point2.Y) / 2);
actualCenter.X = x + (midPoint.X == 0 ? 0 : (x - midPoint.X) >= radius ? 0 : (x - midPoint.X));
actualCenter.Y = y + (midPoint.Y == 0 ? 0 : (y - midPoint.Y) >= radius ? 0 : (y - midPoint.Y));
break;
}
return actualCenter;
}
This works when startangle and sweep angle changed for all cases except the case startangle 179 and sweep angle changed to above 180. case 3 includes the region 180,270,0 . how to write calculations for regions 3.
Any help is really appreciated.
Thanks in advance

When you want to draw an object in the center of something you should do this :
Object.Point =
new Point((something.Width / 2) - (object.Widht /2) ,(something.Height / 2) - object.Height / 2));

how to enable scrolling when zoom in and zoom out on a content page in xamarin forms

i am trying to zoom in and zoom out on a content page using xamarin.forms.
I am able zoom in and zoom out but the problem is scrolling is not working.
i want zoom an image. with this code zooming is working perfectly. But while zooming i am not able to see full image. i must scroll to view the rest of the image. for that i need to scroll. but scrolling is not working.
XAML
xmlns:helper="clr-namespace:KPGTC.Deals.Mobile.Helpers"
<helper:PinchToZoomContainer>
<helper:PinchToZoomContainer.Content>
<Image x:Name="img_Popup"/>
</helper:PinchToZoomContainer.Content>
</helper:PinchToZoomContainer>
Code:
public class PinchToZoomContainer : ContentView
{
double MIN_SCALE = 1;
double MAX_SCALE = 4;
double startScale = 1;
double currentScale = 1;
double xOffset = 0;
double yOffset = 0;
bool _isActive = false;
public PinchToZoomContainer()
{
DependencyService.Get<IHelpers>().ShowAlert("Double-tap to zoom");
//var _pinchGesture = new PinchGestureRecognizer();
//_pinchGesture.PinchUpdated += OnPinchUpdated;
//GestureRecognizers.Add(_pinchGesture);
var _tapGesture = new TapGestureRecognizer { NumberOfTapsRequired = 2 };
_tapGesture.Tapped += On_Tapped;
GestureRecognizers.Add(_tapGesture);
var _panGesture = new PanGestureRecognizer();
_panGesture.PanUpdated += OnPanUpdated;
GestureRecognizers.Add(_panGesture);
TranslationX = 0;
TranslationY = 0;
_isActive = false;
}
private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
{
if (_isActive)
{
if (e.TotalX > 0)
{
if (e.TotalX > 2)
{
TranslationX += 15;
}
}
else
{
if (e.TotalX < -2)
{
TranslationX -= 15;
}
}
}
}
private void On_Tapped(object sender, EventArgs e)
{
if (Scale > MIN_SCALE)
{
_isActive = false;
this.ScaleTo(MIN_SCALE, 250, Easing.CubicInOut);
this.TranslateTo(0, 0, 250, Easing.CubicInOut);
}
else
{
_isActive = true;
AnchorX = AnchorY = 0.5;
this.ScaleTo(MAX_SCALE, 250, Easing.CubicInOut);
}
}
void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs e)
{
if (e.Status == GestureStatus.Started)
{
startScale = Content.Scale;
Content.AnchorX = 0;
Content.AnchorY = 0;
}
if (e.Status == GestureStatus.Running)
{
currentScale += (e.Scale - 1) * startScale;
currentScale = Math.Max(1, currentScale);
double renderedX = Content.X + xOffset;
double deltaX = renderedX / Width;
double deltaWidth = Width / (Content.Width * startScale);
double originX = (e.ScaleOrigin.X - deltaX) * deltaWidth;
double renderedY = Content.Y + yOffset;
double deltaY = renderedY / Height;
double deltaHeight = Height / (Content.Height * startScale);
double originY = (e.ScaleOrigin.Y - deltaY) * deltaHeight;
double targetX = xOffset - (originX * Content.Width) * (currentScale - startScale);
double targetY = yOffset - (originY * Content.Height) * (currentScale - startScale);
Content.TranslationX = targetX.Clamp(-Content.Width * (currentScale - 1), 0);
Content.TranslationY = targetY.Clamp(-Content.Height * (currentScale - 1), 0);
Content.Scale = currentScale;
}
if (e.Status == GestureStatus.Completed)
{
xOffset = Content.TranslationX;
yOffset = Content.TranslationY;
}
}
}

Alright, this was quite a tough one and admittedly I don't understand fully how I made it, but I made it.
Some thoughts:
You mixed the translation of the container and the content, which is quite tricky to handle - if this is possible at all
When panning, you added 15 every time the pan event was raised, but there is a better way: Just store the initial offset of the content and then add the TotalX and TotalY respectively to the TranslationX and the TranslationY of the content (this was the easy part)
Panning while zooming was quite hard to get right and I had to find it out by trial and error
Basically you have to store the origin of the pinch gesture when the gesture starts and calculate the diff between the original origin and the current origin
Then you have to add the diff (multiplied by the with and height respectively of the control) to the target translation
Here is the code for the panning:
private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
{
if (e.StatusType == GestureStatus.Started)
{
this.xOffset = this.Content.TranslationX;
this.yOffset = this.Content.TranslationY;
}
if (e.StatusType != GestureStatus.Completed
&& e.StatusType != GestureStatus.Canceled)
{
this.Content.TranslationX = this.xOffset + e.TotalX;
this.Content.TranslationY = this.yOffset + e.TotalY;
}
if (e.StatusType == GestureStatus.Completed)
{
this.xOffset = this.Content.TranslationX;
this.yOffset = this.Content.TranslationY;
}
}
And here for the pinching
void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs e)
{
if (e.Status == GestureStatus.Started)
{
this.startScale = this.Content.Scale;
this.Content.AnchorX = 0;
this.Content.AnchorY = 0;
this.startScaleOrigin = e.ScaleOrigin;
}
if (e.Status == GestureStatus.Running)
{
var originDiff = PinchToZoomContainer.CalculateDiff(e.ScaleOrigin, this.startScaleOrigin);
this.currentScale += (e.Scale - 1) * this.startScale;
this.currentScale = Math.Max(1, this.currentScale);
double renderedX = this.Content.X + this.xOffset;
double deltaX = renderedX / this.Width;
double deltaWidth = this.Width / (this.Content.Width * this.startScale);
double originX = (this.startScaleOrigin.X - deltaX) * deltaWidth;
double renderedY = this.Content.Y + this.yOffset;
double deltaY = renderedY / this.Height;
double deltaHeight = this.Height / (this.Content.Height * this.startScale);
double originY = (startScaleOrigin.Y - deltaY) * deltaHeight;
double targetX = this.xOffset - ((originX) * this.Content.Width) * (this.currentScale - this.startScale) - originDiff.X * this.Content.Width;
double targetY = this.yOffset - ((originY) * this.Content.Height) * (this.currentScale - this.startScale) - originDiff.Y * this.Content.Height;
this.Content.TranslationX = targetX.Clamp(-this.Content.Width * (this.currentScale - 1), 0);
this.Content.TranslationY = targetY.Clamp(-this.Content.Height * (this.currentScale - 1), 0);
this.Content.Scale = this.currentScale;
}
if (e.Status == GestureStatus.Completed)
{
this.xOffset = this.Content.TranslationX;
this.yOffset = this.Content.TranslationY;
}
}
(Of course you have to add Point startScaleOrigin to your class).
Finally you need the method to calculate the distance between two points
private static Point CalculateDiff(Point first, Point second)
{
return second.Offset(-first.X, -first.Y);
}
Unfortunately I did not manage to get the tapping right, but I think you should be able to figure it out from here.

vector point precision Error

Our application contains .Net FrameWork3.5 and DirectX For Making 2d drawing.
we are stuck with precision problem.Please give solution to solve the precision problem.
we are using vector3f(vector points) to store the values. while we store the result of point in vector3f only 2 precision value is matched.But we need 5 precision value.
Here i have mentioned my code below..
//Function To find ARC Parameters from Bulge value
polylineVertStart=6919.602,18951.51,0 polylineVertEnd=6916.602,18951.51,0
Arc StartPoint=6919.602,18951.5177,0 Endpoint=6916.602,18951.51,0
public static Arc BulgeToArc(PolylineVertex3d polylineVertStart, PolylineVertex3d polylineVertEnd)
{
PolylineVertex3d polylineVertex3d = polylineVertEnd;
PolylineVertex3d polylineVertex3d1 = polylineVertStart; //get previous point
double x1 = polylineVertex3d1.Position.X; //Assign start and end points
double y1 = polylineVertex3d1.Position.Y;
double x2 = polylineVertex3d.Position.X;
double y2 = polylineVertex3d.Position.Y;
if (y1 == y2)
{
y2 += (y1 * 0.0000001);
}
if (x1 == x2)
{
x2 += (x1 * 0.0000001);
}
double bulge = polylineVertex3d1.Bulge;
double incAngle = 4 * System.Math.Atan(System.Math.Abs(bulge)); //included Angle
double chord = System.Math.Sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); //Chord length
double r = 0.5 * chord / System.Math.Cos(0.5 * incAngle - 0.5 * System.Math.PI); //Calculate radius
double Radius = r;
double dx = x2 - x1;
double dy = y2 - y1;
double slope = dy / dx; //slope of two points
double slopeAng = System.Math.Atan(slope);
if (System.Math.Sign(dy) == -1 && System.Math.Sign(dx) == -1)
{
slopeAng = System.Math.PI + slopeAng;
}
else if (System.Math.Sign(dy) == -1 && System.Math.Sign(dx) == 1)
{
slopeAng = 2 * System.Math.PI + slopeAng;
}
else if (System.Math.Sign(dy) == 1 && System.Math.Sign(dx) == -1)
{
slopeAng = System.Math.PI + slopeAng;
}
double d1 = System.Math.Sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
double d2 = d1 / 2;
double startAng = System.Math.Acos(d2 / r); //calculate start angle
double sAngle;
if (System.Math.Abs(bulge) < 1) //get actual start angle based on bulge direction
{
if (System.Math.Sign(bulge) != -1)
{
sAngle = slopeAng + startAng;
}
else
{
sAngle = slopeAng - startAng;
}
}
else
{
if (System.Math.Sign(bulge) != -1)
{
sAngle = slopeAng - startAng;
}
else
{
sAngle = slopeAng + startAng;
}
}
double cx = x1 + r * System.Math.Cos(sAngle);
double cy = y1 + r * System.Math.Sin(sAngle);
Vector3F Center = new Vector3F((float)cx, (float)cy, 0f); //calculate center point
double dx1 = x1 - cx;
double dx2 = x2 - cx;
double dy1 = y1 - cy;
double dy2 = y2 - cy;
double sAng = System.Math.Atan(dy1 / dx1);
double eAng = System.Math.Atan(dy2 / dx2);
if (System.Math.Sign(dy1) == -1 && System.Math.Sign(dx1) == -1)
{
sAng = System.Math.PI + sAng;
}
else if (System.Math.Sign(dy1) == -1 && System.Math.Sign(dx1) != -1)
{
sAng = 2 * System.Math.PI + sAng;
}
else if (System.Math.Sign(dx1) == -1)
{
sAng = System.Math.PI + sAng;
}
if (System.Math.Sign(dy2) == -1 && System.Math.Sign(dx2) == -1)
{
eAng = System.Math.PI + eAng;
}
else if (System.Math.Sign(dy2) == -1 && System.Math.Sign(dx2) != -1)
{
eAng = 2 * System.Math.PI + eAng;
}
else if (System.Math.Sign(dx2) == -1)
{
eAng = System.Math.PI + eAng;
}
double StartAngle;
double EndAngle;
if (System.Math.Sign(bulge) != -1) //finalise start angle and end angle
{
StartAngle = sAng;
EndAngle = eAng;
}
else
{
StartAngle = eAng;
EndAngle = sAng;
}
Direction dir;
if (polylineVertStart.Bulge != 0)
dir = polylineVertStart.Bulge < 0 ? Direction.ClockWise : Direction.CounterClockWise;
else
dir = polylineVertEnd.Bulge < 0 ? Direction.ClockWise : Direction.CounterClockWise;
Arc arc = dir == Direction.ClockWise ? new Arc(Center, new Vector3F(0f, 0f, 1f), Radius, EndAngle, StartAngle, dir) : new Arc(Center, new Vector3F(0f, 0f, 1f), Radius, StartAngle, EndAngle, dir);
return arc;
}
//Function to find ARC from StartAngle,EndAngle,Radius
public RenderingEngine.Geometry GetGeomtry()
{
RenderingEngine.Geometry geometry = new RenderingEngine.Geometry
{
EntityPrimitiveType = EntityPrimitiveType.LineStrip
};
xPoints.Clear();
yPoints.Clear();
zPoints.Clear();
VertexList.Clear();
List<CustomVertex.PositionColored> vertices = new List<CustomVertex.PositionColored>();
if (direction == Direction.ClockWise)
{
#region clockwise
double WedgeAngle = 0.0; //clock wise
if (EndAngle != StartAngle)
{
if (EndAngle < StartAngle)
{
WedgeAngle = (StartAngle - EndAngle) / NUMPOINTS;
}
else
{
WedgeAngle = ((System.Math.PI * 2) - (EndAngle - StartAngle)) / NUMPOINTS;
}
}
double angle = StartAngle;
for (int i = 0; i <= NUMPOINTS; i++)
{
double theta = angle - (i * WedgeAngle);
double x = center.X + (radius * SystemMath.Cos(theta));
double y = center.Y + (radius * SystemMath.Sin(theta));
double z = center.Z;
CustomVertex.PositionColored positionColored = new CustomVertex.PositionColored
{
Position =
new Vector3((float) x, (float) y,
(float) z),
Color = Color.ToArgb()
};
vertices.Add(positionColored);
xPoints.Add((float)x);
yPoints.Add((float)y);
zPoints.Add((float)z);
VertexList.Add(new Vector3F((float)x, (float)y, (float)z));
}
double startx = Center.X + (Radius * System.Math.Cos(StartAngle));
double starty = Center.Y + (Radius * System.Math.Sin(StartAngle));
double startz = Center.Z;
double endx = Center.X + (Radius * System.Math.Cos(EndAngle));
double endy = Center.Y + (Radius * System.Math.Sin(EndAngle));
double endz = Center.Z;
startPoint = new Vector3F((float)startx, (float)starty, (float)startz);
endPoint = new Vector3F((float)endx, (float)endy, (float)endz);
#endregion clockwise
}
else
{
#region Counter ClockWise
double WedgeAngle = 0.0;
if (EndAngle != StartAngle)
{
if (EndAngle > StartAngle)
{
WedgeAngle = (EndAngle - StartAngle) / NUMPOINTS;
}
else
{
WedgeAngle = ((System.Math.PI * 2 - StartAngle) + EndAngle) / NUMPOINTS;
}
}
double angle = StartAngle;
for (int i = 0; i <= NUMPOINTS; i++)
{
double theta = angle + (i * WedgeAngle);
double x = center.X + (radius * SystemMath.Cos(theta));
double y = center.Y + (radius * SystemMath.Sin(theta));
double z = center.Z;
CustomVertex.PositionColored positionColored = new CustomVertex.PositionColored
{
Position =
new Vector3((float) x, (float) y,
(float) z),
Color = Color.ToArgb()
};
vertices.Add(positionColored);
xPoints.Add((float)x);
yPoints.Add((float)y);
zPoints.Add((float)z);
VertexList.Add(new Vector3F((float)x, (float)y, (float)z));
}
double startx = Center.X + (Radius * System.Math.Cos(StartAngle));
double starty = Center.Y + (Radius * System.Math.Sin(StartAngle));
double startz = Center.Z;
double endx = Center.X + (Radius * System.Math.Cos(EndAngle));
double endy = Center.Y + (Radius * System.Math.Sin(EndAngle));
double endz = Center.Z;
startPoint = new Vector3F((float)startx, (float)starty, (float)startz);
endPoint = new Vector3F((float)endx, (float)endy, (float)endz);
#endregion
}
geometry.Vertices.Add(vertices);
return geometry;
}
Here arc start point and endpoint x value always come correctly but y value is some precision problem.
Thanks in Advance..