Develop Reference

Getting the coordinate within a rotated element in JavaScript

I have a question that is math and also JavaScript related. I'm trying to come up with a function to get me the true coordinate within an element that was clicked. The difficulty here is that the element could be rotated.
Otherwise, we could easily get the coordinate within the element on a click by doing using jQuery:
const ELEMENT_X = event.pageX - object.offset().left;
const ELEMENT_Y = event.pageY - object.offset().top;
Not too sure if these JavaScript objects can help calculate the true coordinate of the element:
DOMPoint
DOMMatrix
We know the coordinate of the click on the viewport, the width and height of the element, its offset left/top and we know the rotation angle (could be negative or positive [-180, 180]). So the function I'm trying to get to return the true coordinate of of any four-sided shape would look something like this:
function getClickedCoordinateOfElement(event, elementDOM, rotationAngleInDegrees) {
let coordinate[];
let x, y;
...
return(coordinate[x, y]);
}
I think the solution requires some manipulation of the Sin or Cos of a triangle, but I'm not too sure.
I forgot to mention that the element is not anchored to the origin and could be anywhere.
How would we get the coordinate of the green dot in relative to the inside of the element? The top left corner (ax) of the element would be (0, 0).

Quick and simple way to get min and max y for square within a rotated rectangle

So I'm trying to get the top left x,y values for the green box to crop an image that has been rotated into a square.
The green square can move left and right on the dotted line, so I'm able to get the x value, I'm just having a hard time getting the Y especially when the blue rectangle is a different aspect ratio.
So I know how much the blue rectangle has be rotated and with width and height, also the width and height of the bounding box and same for the green square.
So I need the min and max Y at a certain X value with a rotation between -10 - 10 degrees?
I'm using html and js right now.
the blue rectangle is a scrollable div that's rotated inside the square div so you can see a preview of the crop.
diagram:
http://i.stack.imgur.com/FwXjZ.jpg
thanks

You can setup a line equation for the top and bottom side of the rotated rectangle: y1 = mx + b1, resp. y2 = mx + b2
m is the slope, which is the tangent of the angle between the line and the x-axis.
b is the intercept (the y-value at which the line intersects the y-axis; b = y(0)).
Look at this site for more information.

Center of a rectangle after rotation and shifting in Javascript, Raphael.FreeTransform

I have a problem with Raphael.Freetransform. I need the coordinates of the four corners of a rectangle. Unfortunately it is not possible to simply use the x,y,width and height attributes of the rectangle after a transformation, because they still have the data of before.
With rectangle.matrix.x(x,y) and rectangle.matrix.y(x,y) I can receive the real x and y coordinates of the top left corner and with rectangle.attrs.scale.x and rectangle.attrs.scale.y I can calculate the changed width and height of the rectangle.
Now I do need the center coordinates of the transformed and shifted rectangle to calculate with the help of the rotation angle the other corners, but unfortunately the rectangle.attrs.center.x function of Raphael.FreeTransform only returns the initial center of the rectangle.
So how can I get the coordinates of the center of the rotated and shifted rectangle?
Thank you in advance!

In the local coordinate system of the element, the center is at x+width/2, y+height/2, under the assumption that the rectangle goes from (x,y) to (x+width, y+height). So you have to find the coordinates in the global system using the matrix functions.

What do the Raphael object attributes "x" and "y" mean?

I expected this to be 100% a no-brainer, but as it turns out, I cannot figure out what the x and y attributes of an svg created and manipulated with Raphael.js mean. I assumed they were the coordinates of the top-left corner of the object in relation to the canvas, but now I'm not so sure.
After creating a canvas (var paper = new Raphael(container,width,height)) and adding an image or rectangle to it, for example, if I retrieve the "x" and "y" attributes using the attr method (e.g. object.attr("x")), they're both at 0. However, if I rotate that object and then retrieve the values of x and y again, the values don't reflect the position of the top-left corner of my object in relation to the canvas anymore.
Can someone please explain this to me?

I fear #afaf12's answer complacently goes only half the distance. He's absolutely correct that transformation logic occurs after the fundamental attributes of a given element and doesn't effect them, but it is certainly possible to retrieve the x and y of that element after transformations are applied. You'll want to use the getBBox method, like this:
var bbox = elem.getBBox();
console.log("Transformed coordinates of element are %s,%s", bbox.x, bbox.y );
Please note that there is some trickiness involved -- this returns the bounding box of the element, which is often a superset of the space occupied by the element -- so there's no guarantee that the returned point will be IN the element.
Another alternative occurs if you're using paths -- path.getPointAtLength also works with transformed coordinates, so you can get the x,y offset of the beginning of a path by calling
var coord = elem.getPointAtLength(0);
console.log("Transformed coordinates of path are %s,%s", coord.x, coord.y );

Rotation is a transformation and it does not change x and y of the object.
http://raphaeljs.com/reference.html#Element.transform

Switching positioning reference for object in raphael.js

Learning raphael.js, it seems all objects default to having their x and y coordinates be a reference to the center of the object. This is fine in most cases but I would like the ability to also position an object using one of its corners. Is there a way this parameter can be changed for a given object?

No x and y attributes normally point to the top left of an Element this is certainly the case with rectangle and image.
A circle and ellipse do not have x and y attributes but cx and cy which are there centers.
If you use a text by default x is at the very middle of the text as is y.
If you made a circle and and gave the text the cx and cy values of the circle for it's x y attributes it would be painted in the centre of the circle
Look at Element.getBBox() also this will give you attributes of the space the Element occupies
Good luck..