How to Stretch an Elipse Made of Bezier Paths

[MaTHFRo]

Hi all,

I'm currently writing an iPhone application where I'm taking the following ellipse which I created in Adobe Illustrator:

http://img29.imageshack.us/img29/6584/95436658.gif

And drawing it in my code using the following:

CGPathMoveToPoint(515.98, 258.24);
CGPathAddCurveToPoint(515.98, 435.61, 415.54, 515.98, 258.24, 515.98);
CGPathAddCurveToPoint(100.94, 515.98, 0.50, 435.61, 0.50, 258.24);
CGPathAddCurveToPoint(0.50, 80.86, 100.94, 0.50, 258.24, 0.50);
CGPathAddCurveToPoint(415.54, 0.50, 515.98, 80.86, 515.98, 258.24);

Where CGPathAddCurveToPoint draws a cubic bezier curve to a graphics path. The first four parameters for this function are the first and second control points respectively, and the last two parameters are the end point ie CGPathAddCurveToPoint(cp1x, cp1y, cp2x, cp2y, epx, epy). Each call to CGPathAddCurveToPoint draws one of the four curves that make up my ellipse. Also, CGPathMoveToPoint sets the starting point.

As you can see from above, the code draws the ellipse within a 515.98 x 515.98 square. What I'm trying to do is, I want my code to fit this ellipse (and stretch it) within any rectangular shape I give it. So I'll need to express the points I have up top in terms of the rectangular width and height of the given rectangle. This is easy enough to do for the end points. I am having trouble however figuring out how to express the control points in this manner. Would this be some proportion of the height or width? Any help would be appreciated.

 

[chiro]

Hey MaTHFRo and welcome to the forums.

I suggest if you want to take this specific shape and stretch it, then you obtain the parameterization of the bezier curve and then you scale the x and y-axis respectively that correspond to the actual rectangle.

Assuming the origin is located at the centre of the object, what you can do is to use the formula to generate the final curve and then insteading of using (x,y) use (ax,by) to create a scale version of the object.

Now you could actually do this in your code if you wanted to and what you do is this:

for every (x,y) point you specify assume your rectangle has centroid (a,b) and has scaling relative to your original object (c,d) where (1,1) is exact scaling.

For every point you pass, instead of (x,y) pass (cx - a, dy - b) instead and generate your figure.

 

[MaTHFRo]

Hey MaTHFRo and welcome to the forums.

I suggest if you want to take this specific shape and stretch it, then you obtain the parameterization of the bezier curve and then you scale the x and y-axis respectively that correspond to the actual rectangle.

Assuming the origin is located at the centre of the object, what you can do is to use the formula to generate the final curve and then insteading of using (x,y) use (ax,by) to create a scale version of the object.

Now you could actually do this in your code if you wanted to and what you do is this:

for every (x,y) point you specify assume your rectangle has centroid (a,b) and has scaling relative to your original object (c,d) where (1,1) is exact scaling.

For every point you pass, instead of (x,y) pass (cx - a, dy - b) instead and generate your figure.

Thanks for the response Chiro.

So if I were to have a rectangle that was W = 300, H = 100, and I wanted to translate the first control point of the first curve, would it be something like this:

X = 515.98
Y = 258.24
A = 150
B = 50
C = 150 / 515.98
D = 50 / 515.98

Also, my origin is actually at the upper left corner, don't know how much of a difference that makes.

MaTHFRo

 

[chiro]

Thanks for the response Chiro.

So if I were to have a rectangle that was W = 300, H = 100, and I wanted to translate the first control point of the first curve, would it be something like this:

X = 515.98
Y = 258.24
A = 150
B = 50
C = 150 / 515.98
D = 50 / 515.98

Also, my origin is actually at the upper left corner, don't know how much of a difference that makes.

MaTHFRo

It makes a big difference.

Essentially what the transformation does is translate the graph a units to the right and b units up and scales the whole thing in both directions.

The thing though is that if your origin is somewhere else, you will need to use different scaling factors. The above scales and then translates: if you wanted to translate then scale you would use say (x-a)*c instead of xc - a.

What you will need to do is use a' = a + x_centre_of_object, b' = b + y_centre_of_object.

Actually what you should do in my recommendation just in case, is to create the same shape with the centre at the origin by translating every control point by the negative of the centroid, and if you get the same shape, then you know the shape is invariant under translation.

You can then use the scaling formula to see if it scales correctly. It should if its a bezier curve do this, but it's best to run the code and see what happens.

 

[MaTHFRo]

It makes a big difference.

Essentially what the transformation does is translate the graph a units to the right and b units up and scales the whole thing in both directions.

The thing though is that if your origin is somewhere else, you will need to use different scaling factors. The above scales and then translates: if you wanted to translate then scale you would use say (x-a)*c instead of xc - a.

What you will need to do is use a' = a + x_centre_of_object, b' = b + y_centre_of_object.

Actually what you should do in my recommendation just in case, is to create the same shape with the centre at the origin by translating every control point by the negative of the centroid, and if you get the same shape, then you know the shape is invariant under translation.

You can then use the scaling formula to see if it scales correctly. It should if its a bezier curve do this, but it's best to run the code and see what happens.

Thanks. When you say x_centre_of_object, I'm guessing that would mean the original object? So it would be (x-a')*c.

Also, just wondering could this work for more complicated shapes as long as they were comprised of bezis?

 

[chiro]

Thanks. When you say x_centre_of_object, I'm guessing that would mean the original object? So it would be (x-a')*c.

Also, just wondering could this work for more complicated shapes as long as they were comprised of bezis?

Yeah the a' and b' is right.

The procedure will work for any interpolation as long as the mechanism produces an (x,y) pair for the actual procedure for some parameterization and given data (like control points).

Just for reference, what actually happens is that when you do f(x-a) it shifts the graph a units to the right. But what is going on here is that you have a function for x and y given by your interpolation which calculates an x and y for a parameter usually in the [0,1] range.

If the interpolation works like a regular function, it means that translating with translating the entire object and scaling will stretch the object with respect to the x and y-axis with respect to the origin: this means if the object is not centred at the origin and you scale, you'll get some weird effects and the aspect ratio will be all screwed up.

 

[MaTHFRo]

Thanks again sir.