1

I'm gonna start with an apology, I'm struggling to articulate this question, so I'll begin with what I'm trying to achieve.

I am using Javascript with Raphael.

So, I'm trying to store the position of a point relative to the four corners of a polygon. Opposite corners of the polygon can be seen as having an axis between them, which always meets at a right-angle with the other axis. The polygon can be rotated, and grown/shrunk on either axis, but the axes will stay at right angles. I want the point to stay in the same spot on the polygon as it moves/stretches. The point is placed by the user clicking on a spot on the polygon.

I want to be able to take the X/Y co-ordinates of a mouseclick, and turn it into some relative percentage or something of the polygon's internal axes, which may not always be parallel with the browser's X/Y axes. How would I do this?

This image may help clarify the idea that I'm trying to express.

enter image description here

The green spot is the point in which I would like to store the relative position of within the polygon. I have X/Y co-ordinates for the red and blue corner spots.

Fraserr
  • 151
  • 1
  • 8
  • I haven't used Raphael specifically so can't give a code example, but as a geometry problem, I would convert the xy coordinate into a vector from the center of the polygon - i.e. angle and distance. This can then have transformations applied and be converted back into a coordinate. – Alex Osborn Mar 06 '13 at 02:43
  • You should ask this on http://math.stackexchange.com/ – Dave Mar 06 '13 at 02:56

1 Answers1

0

Consider the lines joining your two red dots the X axis, and the lines joining the blue dots the Y axis; then you can express any point in the polygon as "this far along X, and this far along Y". That leaves you with two problems to solve:

  1. Given the five points, what are the "red blue" coordinates of the green point?
  2. Given four points and the RB value, where is the green point?

You do this by projecting the point along the red axis onto the blue axis, and vice versa.

Let the coordinates of the red points be (R1x, R1y) etc. Then we do the following:

RdirX = R2x - R1x;
RdirY = R2y - R1y;
BdirX = B2x - B1x;
BdirY = B2y - B1y;

Now if the green coordinates are (Gx, Gy) and the "new" coordinates (RBr, RBb), you have the following equations:

RBr*RdirX + RBb*BdirX = Gx
RBr*RdirY + RBb*BdirY = Gy

In this form it solves the second part of the problem (going from RB coordinates back to Euclidean); to go in the other direction, you solve these equations for the unknowns RBr and RBb. I suspect things will work better if you make the center of your polygon the origin of your coordinate system.

I have written out the equations in full, as well as creating a picture that shows how this all works:

enter image description here
enter image description here

You should be able to do it from here...

Floris
  • 45,857
  • 6
  • 70
  • 122