I'm working on a rather Large project. It was already finished when I started and I have to implement some small gimics.
One of those is the rotation of a marker on a map.
When the marker is selected a rectangle (System.Wndows.FrameWorkElement) is drawn around the picture. Since I would basically have to rewrite the whole program to use another rectangle, I have to stick with the framework element.
To rotate this thing, I added a line and a circle.
The line connects the circle with the rectangle. When the user clicks on the circle and drags the mouse, the whole thing is supposed to rotate around the center of the rectangle.
So far, the rotation of the rectangle and the line works fine. But the circle, though it is rotating around the center of the rectangle, is also rotating around a point at it's own border.
I rotate the rectangle with a RenderTransform object, which works well enough and is easy enough.
For the line and the circle, I wrote a method to calculate the rotation.
The line I can calculate without using the angle.
Here's the method:
private void SetPositionOfRotationShaft(Point center)
{
double l = Math.Sqrt(Math.Pow((this.ConnectionLineDirection.X - center.X), 2) + Math.Pow((this.ConnectionLineDirection.Y - center.Y), 2));
double factor = Math.PI / 180;
this.connectionLine.X1 = center.X + (this.surroundingRectangle.Height / (2 * l)) * (this.ConnectionLineDirection.X - center.X);
this.connectionLine.Y1 = center.Y + (this.surroundingRectangle.Height / (2 * l)) * (this.ConnectionLineDirection.Y - center.Y);
this.connectionLine.X2 = center.X + ((this.surroundingRectangle.Height + 40) / (2 * l)) * (this.ConnectionLineDirection.X - center.X);
this.connectionLine.Y2 = center.Y + ((this.surroundingRectangle.Height + 40) / (2 * l)) * (this.ConnectionLineDirection.Y - center.Y);
double translatedLeft = Canvas.GetLeft(this.rotationSign) - center.X;
double translatedTop = Canvas.GetTop(this.rotationSign) - center.Y;
double left = ((translatedLeft * Math.Cos(-this.rotateSurroundingRectangle.Angle*factor)) + (translatedTop * Math.Sin(-this.rotateSurroundingRectangle.Angle*factor))) + center.X;
double top = ((translatedTop * Math.Cos(-this.rotateSurroundingRectangle.Angle * factor)) - (translatedLeft * Math.Sin(-1 * this.rotateSurroundingRectangle.Angle * factor))) + center.Y;
Canvas.SetLeft(this.rotationSign, left);
Canvas.SetTop(this.rotationSign, top);
}
Also curious, when i use the same calculation for the line as i do for the circle, the line rotates at a higher speed. The same thing happend to the circle until i added the factor.
So, the problem was, that i had to set the position of the circle with Canvas.SetLeft() and SetTop(), which is essentialy the upper left corner of a square around the circle.
For my rotation to work, i should have set the center (but that's not possible). So i had to subtract the radius of the circle from top and left.
Canvas.SetLeft(this.rotationSign, left-radius);
Canvas.SetTop(this.rotationSign, top-radius);
Related
I am trying to create a library which allows user to edit shapes on a canvas, primarily moving, resizing, and rotating the shapes.
I have a problem with my rotating code in that the degree of rotation seems to be off by -90 degrees.
This is my code that does the rotation, in the mouseMove event:
var mousePos = e.GetPosition(this.Parent as FrameworkElement);
//gridPos is the center point of the shape object (contained within a grid control for reasons
var gridPos = new Point(Canvas.GetLeft(this) + this.ActualWidth / 2, Canvas.GetTop(this) + this.ActualHeight / 2);
//Get the angle in radians
double radians = Math.Atan2(mousePos.Y - gridPos.Y, mousePos.X - gridPos.X);
//Convert to degrees
double angle = radians * (180 / Math.PI);
//Apply rotation from centre
RenderTransformOrigin = new Point(0.5, 0.5);
//This is applied initially to my shape control object which has the shape as child
RenderTransform = new RotateTransform(degrees);
This is what I'm seeing:
As you can see, the shape immediately rotates about -90. The red marks are drawn at mousePos and gridPos.
If I put some Debug.WriteLine in that, this is what results:
MouseX: 440.14, MouseY: 148
GridX: 443.14, GridY: 197
MouseX - GridX: -3
MouseY - GridY: -49
Radians: -1.631944489444198
Degrees: -93.50353164478446
I can't work out what's wrong with my logic here, although I'm pretty sure Math.Atan2(mousePos.Y - gridPos.Y, mousePos.X - gridPos.X); isn't giving me what I think it is...
Using atan2(y, x) only works if your anchor point is to the _right of the rotation point. Code for each is as follows:
double radians = Math.Atan2(gridPos.Y - mousePos.Y, gridPos.X - mousePos.X); // left
double radians = Math.Atan2(mousePos.X - gridPos.X, gridPos.Y - mousePos.Y); // top
double radians = Math.Atan2(gridPos.X - mousePos.X, mousePos.Y - gridPos.Y); // bottom
double radians = Math.Atan2(mousePos.Y - gridPos.Y, mousePos.X - gridPos.X); // right
Ideally though, what you should be doing is calculating the angle of the point where you initially click down, then calculate the new angle for your mousemove events, setting the rotation to be whatever the difference is between them. That's essentially what each of the 4 lines above is doing, they're just hard-coding the initial mouse down point.
I'm writing a custom editor window in Unity in which I would like to be able to both scroll in/out and drag the view around. To do so, I've been setting GUI.matrix to Matrix4x4.TRS(offset, Quaternion.identity, Vector3.one * scale), where I have control over offset and scale. This works fine, except when scrolling in/out, it anchors the top left of the window. I would like it to anchor on the mouse's position.
If this just requires changing the offset when zooming, that's great - I'm just not sure what the offset should be here. Matrix4x4s are out of my comfort zone for math.
Here is how I'm currently handling zooming:
if (Event.current.type == EventType.ScrollWheel)
{
_scale *= Math.Sign(Event.current.delta.y) == 1 ? 1.1f : 1f / 1.1f;
_offset += Math.Sign(Event.current.delta.y) * /*What do I put here?*/;
}
Let's try to understand whatthe GUI matrix does. It represents a transform that takes coordinates in world space (where your GUI objects live) and converts them to GUI space (more or less aligned with your window). Since we have no rotation, we can easily interpret what constructing the matrix with TRS() does to a world-space point pWorld:
pGUI = scale * pWorld + offset
Now you want to change scale to scaleNew. In doing so, you want to keep the same world position under the mouse.
If your mouse position is given in GUI space (e.g., from Event.current.mousePosition), then we first need to find the corresponding world space point:
v3World = (1.0 / scaleOld) * (v3GUI - offsetOld)
And we want to fix this point under the mouse, i.e.:
v3GUI = scaleNew * v3World + offsetNew
v3GUI = scaleNew / scaleOld * (v3GUI - offsetOld) + offsetNew
We can solve this to get the new offset:
v3GUI = scaleNew / scaleOld * v3GUI - scaleNew / scaleOld * offsetOld + offsetNew
(1 - scaleNew / scaleOld) * v3GUI + scaleNew / scaleOld * offsetOld = offsetNew
And that's it.
Btw, you can also do this with matrix operations alone. This is what GUIUtility.ScaleAroundPivot() does. This is how it looks:
newMatrix = T(v3GUI) * S(newScale / oldScale) * T(-v3GUI) * oldMatrix
T represents a translation and S a scaling. The translation pair T(v3GUI) and T(-v3GUI) move the temporary origin of the coordinate system to your mouse position and perform the scaling from there. You could then directly read offset and scale from this matrix.
I am currently working on a WinForms app, which at some point has to draw some stuff. Basically, it has to draw an unknown number of circles (f.e 3, 5, 10) in organized in a shape of a circle. Something like this:
I know it looks horrible. So I thought about defining a center of a circle and a radius. Then I just have to go f.e from the top of the big circle and draw a small circle every x-degrees (like for 3 circles it would be 120 degrees, for 4 circles 90 degrees etc.).
My question here is: Is there an algorithm, which would give me the center point of a circle to draw? Like I define my big circle with f.e center X = 50, Y = 50 and a radius R = 10. And then I draw a circle at the top, decide that I want to draw the next one 120 degrees far from the first one and I just need a point (X, Y) which is on the big circle?
Basically, you just need some math to figure out the coordinate of where the angle lands at the end of perimeter of the circle (a distance of the radius of the circle from the center of the circle). Here's psuedocode for this situation.
var center = new Point(0,0);
var radius = 5;
var degrees = 83;
var angle = Math.PI * degrees / 180;
var xPos = center.X + (radius * Math.cos(angle));
var yPos = center.Y + (radius * Math.sin(angle));
var newPosition = new Point(xPos,yPos);
Here, newPosition becomes the center point for the circled you'll be drawing along your imaginary circle. As for gathering the angles, simply use 360 / count * index.
For a screen overlay I am making for a 3-dimensional game, I need to display icons over certain locations in the 3D world. I've managed to get several variables from the game that should make this possible:
Player position (x,y,z)
Camera position (x,y,z)
Point position (x,y,z)
Camera Angle(FOV)
Using these variables I managed to get the right and left edge of the camera view. Using these 2 variables I am able to get the point between 0 and 1 where the icon should be displayed on the x axis. (0 is on the left edge, 1 is right edge) This seems to work quite well, but only if I am aligned to either the X or Z axis, as shown in the following example:
I've been trying to fix this using the following rotation matrix:
[ Math.Cos(angle), -Math.Sin(angle) ]
[ Math.Sin(angle), Math.Cos(angle) ]
What I do is, I put the player position, camera position and the camera edge positions in the matrix with as rotation point the world point. The problem is, as soon as I put the angle amount at 90 degrees, the X and Y are being flipped. I've been trying to find a solution for this for a few days now, but I can't find it, so I hope anyone can push me in the right direction here. Below are a few parts of my code that might help in finding the solution:
float PCDistXZ = (float)Math.Sqrt(deltaPCx * deltaPCx + deltaPCz * deltaPCz); // X/Z distance from the world point to the camera
Point fakeAvatarPos = RotateAround(new Point((int)point.x, (int)point.z), new Point((int)avatar.x, (int)avatar.z), (int)90);
Point fakeCameraPos = RotateAround(new Point((int)point.x, (int)point.z), new Point((int)camera.x, (int)camera.z), (int)90);
double edgeRight = fakeC.X + (Math.Sin(45) * PCDistXZ);
double edgeLeft = fakeC.X - (Math.Sin(45) * PCDistXZ);
float edgeTest_ScreenPositionX = (1 - (float)((edgeRight - P.x) / (edgeRight - edgeLeft))) * screenWidth;
public static Point RotateAround(Point pCenter,Point pPoint, float pAngle)
{
double angle = (pAngle * Math.PI) / 180;
double[,] matrix = new Double[2, 2] {
{ Math.Cos(angle), Math.Sin(angle) },
{ Math.Sin(angle), Math.Cos(angle) }
};
double xOffset = pPoint.X - pCenter.X;
double yOffset = pPoint.Y - pCenter.Y;
Point newPoint = new Point(
(int)(((pPoint.X - xOffset) * matrix[0, 0]) - ((pPoint.Y - xOffset) * matrix[0, 1])),
(int)(((pPoint.X - yOffset) * matrix[1, 0]) + ((pPoint.Y - yOffset) * matrix[1, 1]))
);
newPoint.X += (int)xOffset;
newPoint.Y += (int)yOffset;
return new Point(newPoint.X,newPoint.Y);
}
Note: I've changed the names of some of the variables to more understandable one, so it could be possible that there are inconsistencies in the names.
EDIT: I found out about view- and projection matrices. I might be able to use those to convert the 3D position to screen. I'm not sure if it's possible to make this matrices with the limited information I have though.
Assuming I have a form and paint an oval on it. I then want to take a control (such as a picturebox) and (while keeping the top left corner of the control exactly on the line) I want to move the control pixel by pixel following the drawn oval.
Basically I want to calculate the Top/Left point for each position/pixel in my oval. I know its a basic formula but cant for the life of me remember what its called or how its accomplished.
Anyone care to help?
double step=1.0; // how fast do you want it to move
double halfWidth=100.0; // width of the ellipse divided by 2
double halfHeight=50.0; // height of the ellipse divided by 2
for (double angle=0; angle<360; angle+=step)
{
int x=(int)halfWidth * Math.Cos(angle/180*Math.PI);
int y=(int)halfHeight * Math.Sin(angle/180*Math.PI);
pictureBox.TopLeft=new Point(x,y);
}
EDIT:
Now, if you are about to ask why isn't it moving if you write it like that - you'll have to add message loop processing to it, in form of:
Application.DoEvents();
which you will place inside the loop.
Ellipse canonical form:
x-x^2/a^2 + y^2/b^2 = 1
where a = Xradius and b = Yradius. So, for example, if you want the top-left point of a rectangle on the bottom side of an ellipse:
y = Sqrt((1-x^2/a^2)*b^2)
upd: to move an ellipse to specified point XC,YC, replace each x with (x-XC) and (y-YC). so if you're (in C#) drawing an ellipse in a rectangle, so XC = rect.X + a YC = rect.Y + b and the final equation is y = Sqrt((1 - Pow(x - rect.X - rect.Width / 2, 2) * Pow(rect.Height / 2, 2)) + rect.Y + rect.Height / 2... seems to be correct)