Hello,
I’m trying to make tool to be able to select area of interest in a bitmap so that later on I could use it in other graphical and 3D manipulations. The fastest way for that, in my opinion, is adjusting the UV coordinates of the bitmap texture, because it’s drawn in the [FONT=courier new][COLOR=#0000FF]MovieClip[/COLOR][/FONT] through [FONT=courier new][COLOR=#0000FF]drawTriangles[/COLOR][/FONT] method, and it’s convenient not having to care about UV coordinates once I start doing perspective adjustments (homography).
As long as I work in straight horizontal and vertical lines - it gives me no trouble. However, if I try to rotate it skewing and tearing appears. I tried adding two sets of possible point positions so it would fit to proportions to blend between, but still during transitions it goes crazy.
Illustration:
I handle UV rotation and scaling in separate class - basicly it has a center point and I store the distance to each point and an angle to it, so I can add rotation and scaling easily. Since UV operates in 0-1 coordinate space I realize there has to be some sort of proportion correction, but can’t figure what (during the rotation). If I simply multiply Y and X by aspectRatio, it gives me correct aspect every 90 degree turn, but inbetween it stays skewed.
Live preview: HERE
Instruction:
Left Mouse Button: PAN
Middle Mouse Button: Rotate (around center)
Right Mouse Button: width and height offset
Mouse Wheel: scale
“R” key: Reset transformation
Function to initialize and reset UV area:
private function resetPoints():void
{
var tAspecth:Number = (height + hOff) / (width + wOff); // hOff and wOff are width/height offsets modified by user
var tAspectv:Number = (width + wOff) / (height + hOff);
var tPoint:Point = new Point(x, y);
points[0].p = new Point(x - (width+wOff)/2, y - (height+hOff)/2);
points[1].p = new Point(x + (width+wOff)/2, y - (height+hOff)/2);
points[2].p = new Point(x + (width+wOff)/2, y + (height+hOff)/2);
points[3].p = new Point(x - (width+wOff)/2, y + (height+hOff)/2);
points[4].p = new Point(x - ((width+wOff)/2 + (width+wOff)/2 / tAspectv), y - ((height+hOff)/2 + (height+hOff)/2 / tAspecth)); // points 4 - 7 are the ones with aspect ratio applied to them for blending between them later on.
points[5].p = new Point(x + ((width+wOff)/2 + (width+wOff)/2 / tAspectv), y - ((height+hOff)/2 + (height+hOff)/2 / tAspecth));
points[6].p = new Point(x + ((width+wOff)/2 + (width+wOff)/2 / tAspectv), y + ((height+hOff)/2 + (height+hOff)/2 / tAspecth));
points[7].p = new Point(x - ((width+wOff)/2 + (width+wOff)/2 / tAspectv), y + ((height+hOff)/2 + (height+hOff)/2 / tAspecth));
points[0].angle = getAngle(tPoint, points[0].p); // getAngle just uses Math.atan2 to get angle between two points
points[1].angle = getAngle(tPoint, points[1].p);
points[2].angle = getAngle(tPoint, points[2].p);
points[3].angle = getAngle(tPoint, points[3].p);
points[4].angle = getAngle(tPoint, points[4].p);
points[5].angle = getAngle(tPoint, points[5].p);
points[6].angle = getAngle(tPoint, points[6].p);
points[7].angle = getAngle(tPoint, points[7].p);
distance = Point.distance(tPoint, points[0].p); //distance to all points in the square
distance2 = Point.distance(tPoint, points[0].p);
}
Then when asked by the parent to give the 4 corner points I create a tRot variable to know how far it rotated (0…90…0 → 0…1…0):
var tRot:Number = 1-Math.abs(Math.abs(rotation) % 180 - 90)/90;
And then for each point I return the value:
Point.polar((distance + (distance2 - distance)*tRot)*scale, ((points[k].angle + (points[k+4].angle - points[k].angle) * tRot) + rotation) * (Math.PI/180));
Spent all day trying to figure this out, I hope it’s something simple I missed that you guys could point out :asleep:
Cheers! :beer2:
