|
Registered User
Join Date: Jan 2007
Posts: 1
|
dynamic rounded rectangle
I'm trying to make a lite version of the game of Word Search, but I'm having huge problems drawing the rounded rectangle to select a word on the Word Search.
I have the formula for building the rounded rectangle, but the problems are:
1-) The rectangle doesn't follow exactly the direction (or angle) of the mouse coordinates, even through I used the Math.atan2().
2-) I would like to limit the angles to 0, 45 and 90. The rounded rectangle must rotate with the mouse position in reference of the first coordinate that I clicked
3-) The scale of the rounded rectangle must be toward the angle of the mouse in reference of the first letter you clicked.
This is the code I have so far: (the drawRoundRect method is bound to the onPress event of the grid)
private function drawRoundRect():Void
{
var refGrid_mc:MovieClip = pParent_mc.mainGrid;
var ellipse_mc:MovieClip;
var nextDepth:Number = refGrid_mc.getNextHighestDepth();
var intId:Number;
var xPos, startX:Number;
var yPos, startY:Number;
ellipse_mc = refGrid_mc.createEmptyMovieClip('ellipse'+nextDept h, nextDepth);
xPos = Math.floor(refGrid_mc._xmouse/40);
yPos = Math.floor(refGrid_mc._ymouse/40);
startX = (xPos * 40) + 5;
startY = (yPos * 40) + 5;
trace('startX: '+startX);
trace('startY: '+startY);
trace('position: '+ "letter"+xPos+"_"+yPos);
pIntId = setInterval(refreshRoundRect, 50, ellipse_mc, startX, startY)
}
private function refreshEllipse(ellipse_mc:MovieClip, x:Number, y:Number):Void
{
var width, height, round, rotation:Number;
width = _root._xmouse - x;
height = 20;
/*if(height>width)
{
height -= width;
width += height;
height = width - height;
}*/
round = 10;
rotation = Math.atan2(-(_root._ymouse - y), _root._xmouse - x);
ellipse_mc.clear();
ellipse_mc.lineStyle(1, 0x000000, 100);
// Make sure the rectangle is at least as wide and tall as the rounded corners
if (width < (round * 2))
{
width = round * 2;
}
if (height < (round * 2))
{
height = round * 2;
}
trace('rotation: '+rotation*180/Math.PI);
// Convert the rotation from degrees to radians
//rotation = Math.degToRad(rotation);
// Calculate the distance from the rectangle's center to one of the corners
// (or where the corner would be in rounded-cornered rectangles).
// See the line labeled r in Figure 4-2.
var r = Math.sqrt(Math.pow(width/2, 2) + Math.pow(height/2, 2));
// Calculate the distance from the rectangle's center to the upper edge of
// the bottom-right rounded corner. See the line labeled rx in Figure 4-2.
// When round is 0, rx is equal to r.
var rx = Math.sqrt(Math.pow(width/2, 2) + Math.pow((height/2) - round, 2));
// Calculate the distance from the rectangle's center to the lower edge of
// the bottom-right rounded corner. See the line labeled ry in Figure 4-2.
// When round is 0, ry is equal to r.
var ry = Math.sqrt(Math.pow((width/2) - round, 2) + Math.pow(height/2, 2));
// Calculate angles. r1Angle is the angle between the X axis that runs through
// the center of the rectangle and the line rx. r2Angle is the angle between rx
// and r. r3Angle is the angle between r and ry. And r4Angle is the angle
// between ry and the Y axis that runs through the center of the rectangle.
var r1Angle = Math.atan( ((height/2) - round) /( width/2) );
var r2Angle = Math.atan( (height/2) / (width/2) ) - r1Angle;
var r4Angle = Math.atan( ((width/2) - round) / (height/2) );
var r3Angle = (Math.PI/2) - r1Angle - r2Angle - r4Angle;
// Calculate the distance of the control point from the arc center for the
// rounded corners.
var ctrlDist = Math.sqrt(2 * Math.pow(round, 2));
// Declare the local variables used to calculate the control point.
var ctrlX, ctrlY;
// Calculate where to begin drawing the first side segment, and then draw it.
rotation += r1Angle + r2Angle + r3Angle;
var x1 = x + ry * Math.cos(rotation);
var y1 = y + ry * Math.sin(rotation);
ellipse_mc.moveTo(x1, y1);
rotation += 2 * r4Angle;
x1 = x + ry * Math.cos(rotation);
y1 = y + ry * Math.sin(rotation);
ellipse_mc.lineTo(x1, y1);
// Set rotation to the starting point for the next side segment and calculate
// the x and y coordinates.
rotation += r3Angle + r2Angle;
x1 = x + rx * Math.cos(rotation);
y1 = y + rx * Math.sin(rotation);
// If the corners are rounded, calculate the control point for the corner's
// curve and draw it.
if (round > 0)
{
ctrlX = x + r * Math.cos(rotation - r2Angle);
ctrlY = y + r * Math.sin(rotation - r2Angle);
ellipse_mc.curveTo(ctrlX, ctrlY, x1, y1);
}
// Calculate the end point of the second side segment and draw the line.
rotation += 2 * r1Angle;
x1 = x + rx * Math.cos(rotation);
y1 = y + rx * Math.sin(rotation);
ellipse_mc.lineTo(x1, y1);
// Calculate the next line segment's starting point.
rotation += r2Angle + r3Angle;
x1 = x + ry * Math.cos(rotation);
y1 = y + ry * Math.sin(rotation);
// Draw the rounded corner, if applicable.
if (round > 0)
{
ctrlX = x + r * Math.cos(rotation - r3Angle);
ctrlY = y + r * Math.sin(rotation - r3Angle);
ellipse_mc.curveTo(ctrlX, ctrlY, x1, y1);
}
// Calculate the end point of the third segment and draw the line.
rotation += 2 * r4Angle;
x1 = x + ry * Math.cos(rotation);
y1 = y + ry * Math.sin(rotation);
ellipse_mc.lineTo(x1, y1);
// Calculate the starting point of the next segment.
rotation += r3Angle + r2Angle;
x1 = x + rx * Math.cos(rotation);
y1 = y + rx * Math.sin(rotation);
// If applicable, draw the rounded corner.
if (round > 0)
{
ctrlX = x + r * Math.cos(rotation - r2Angle);
ctrlY = y + r * Math.sin(rotation - r2Angle);
ellipse_mc.curveTo(ctrlX, ctrlY, x1, y1);
}
// Calculate the end point for the fourth segment, and draw it.
rotation += 2 * r1Angle;
x1 = x + rx * Math.cos(rotation);
y1 = y + rx * Math.sin(rotation);
ellipse_mc.lineTo(x1, y1);
// Calculate the end point for the next corner arc, and if applicable, draw it.
rotation += r3Angle + r2Angle;
x1 = x + ry * Math.cos(rotation);
y1 = y + ry * Math.sin(rotation);
if (round > 0)
{
ctrlX = x + r * Math.cos(rotation - r3Angle);
ctrlY = y + r * Math.sin(rotation - r3Angle);
ellipse_mc.curveTo(ctrlX, ctrlY, x1, y1);
}
Any help will be greatly appreciated. Thanks.
|