Transform + scale a set of points

2
votes

I wrote a gui where a user draws something in a (640x480) window. It makes that drawing into a set of points stored in a Vector array. Now, how do I translate those set of points to the origin (0,0 top left corner of the window) or put it at a specified pos? The width and height of the window I want it in is also 640x480.

After that is solved, how do you scale that new set of points to a size I want?

UPDATE 1

I solved the scale issue, but not the positioning issue. The drawing is not going where I tell it to be. Code below of what I have so far.

float scaleX = (float)width/boundingPoints.width;
float scaleY = (float)height/boundingPoints.height;
for(int i = 0; i < cg_points.size()-1; i++){
    Point p1 = cg_points.get(i);
    Point p2 = cg_points.get(i+1);
    g.drawLine((int)(p1.x*scaleX) + pos.x, (int)(p1.y*scaleY) + pos.y, (int)(p2.x*scaleX) + pos.x, (int)(p2.y*scaleY) + pos.y);
}

I want the drawing to start at where pos [x, y] is. What is currently the problem is this. It does follow what pos.x and pos.y does, but it is way off and not starting at pos[x,y].

Here is a screen shot of the issue Image of transformation issue

As you can see from the picture, the box is where the star is supposed to be. The scaling is right as you can see, just not the pos. That is because the points in the drawing may NOT start at (0,0).

Any suggestions?

Thanks!

2
javajavascriptmathvectormatrix
So what kind of program is this? Java? JavaScript? Please explain the need for both tags. - Hovercraft Full Of Eels
The need for both tags is because this is for both java and JavaScript. - Scott Deutsch
I'm sorry, but I still don't understand. Can you please explain and give a little detail -- how are you using this for both Java and JavaScript? - Hovercraft Full Of Eels
I wrote a editor in Java that allows you to do certain things and then it converts that stuff to javascript. - Scott Deutsch
In mathematical language, transforming is addition/subtraction and scaling is multiplication/division. - Bitwise

2 Answers

2
votes

To translate a drawing, simply

foreach point in array
    point.x += translate.x
    point.y += translate.y

If you're going to center a drawing, pick a center (such as averaging all your points), negate that value, then translate all your points by that value.

To scale a drawing:

foreach point in array
    point.x *= scale
    point.y *= scale
0
votes

So I solved it...YAY!!! Here is the code below in case you run into the same issue as I had.

    float scaleX = (float)width/boundingPoints.width;
    float scaleY = (float)height/boundingPoints.height;
    int bx = boundingPoints.x;
    int by = boundingPoints.y;
    for(int i = 0; i < cg_points.size()-1; i++){
            Point p1 = cg_points.get(i);
            Point p2 = cg_points.get(i+1);
            int x1 = (int) ((p1.x-bx)*scaleX);
            x1 += pos.x;
            int y1 = (int) ((p1.y-by)*scaleY);
            y1 += pos.y;
            int x2 = (int) ((p2.x-bx)*scaleX);
            x2 += pos.x;
            int y2 = (int) ((p2.y-by)*scaleY);
            y2 += pos.y;

            g.drawLine(x1, y1, x2, y2);
        }