Monday, July 16, 2007

Work has been progressing steadily on Lunar Eclipse, although not quite as fast as i'd hoped for. At the moment, my big challenge is coping with resizing while shapes are rotated. Unfortunately, it doesn't seem that easy to deal with. I've attached a video which demonstrates the issue. Check it out here:

When a shape is in it's normal rotation (i.e. angle is zero), the change in Y coordinate in the mouse can be directly related to a change in height of the shape, and a change in X coordinate in the mouse can be directly related to a change in width, so everything resizes nicely.

However, when the shape is rotated by 90 degrees, a change in the X coordinate now relates to the height, and a change in Y is the width. At other angles, a change in 'height' is contributed to by both the X coordinate and Y coordinate change in the mouse.

The problem is that i don't know how best to handle this. The main issues are the following:
1) The amount of resizing to do should be based on the how far the mouse moves in the 'right' direction. i.e. if you move the mouse perpendicular to the side of the shape, the side should expand to follow the mouse
2) When resizing, the shapes shouldn't float around. As you can see towards the end, when i resize the rotated shape, it physically moves around the canvas.

So, if anyone has any advice on how to tackle these issues without tonnes of helper code, that'd be amazing. Currently, things are looking like they could get fairly messy trying to get this to work.

If anyone wants to check out the code, it's available at:


Anonymous said...

Shouldn't some basic trig functions and knowing the angle of rotation help you with the first problem?

Alan said...

Yup, i can handle it easily with basic trig. Unfortunately, if i code it the way i'm currently thinking of, it will be a horrible mess of if/else statements with angles begin calculated left right and centre and dozens of temporary variables holding intermediate results while i calculate how much i need to change the width, height, top and left properties (the 4 which control the location of the shape). This is what i need to simplify.

I have solved the first problem for one particular angle of rotation when changing the width, but there *has* to be an easier way of doing it that i don't know of.

GrayShade said...

I'm not sure that I understood correctly, but:

When you're dragging your mouse with the button pressed, you're marking a vector between the original point and the new one. Then you should use its X and Y components for resizing the object. This is the simple case.

When the object is rotated, let's say by alpha radians, the vector will have to be rotated in the opposite direction, i. e. a rotation of -alpha. You can use the form given in , making theta equal to -alpha to reverse the direction. The left side is the new vector and you can use one or both of its components (depending on the type of the control point) to enlarge the object.

Or maybe you already figured this out yourself.

As for the second problem, I didn't look at your implementation.

Mahesh said...


I am facing the same problem. I got to here through google. Please let me know if you have solved the problem (resizing when rotated).

If you have solved please reply to my comment. I will watch up this space.
Thank you

Hit Counter