Home Tutorials Forums Articles Blogs Movies Library Employment Press
Old 01-27-2007, 02:58 PM   #1
pbreah
Registered User
 
Join Date: Jan 2007
Posts: 1
Question 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.
pbreah is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Drawing a rounded rectangle at runtime martyf ActionScript 2.0 6 01-21-2009 07:40 PM
Text in MC not displayed when put to Dynamic? SebCH Simple Stuff (Newbies) 4 01-13-2006 03:34 PM
scripted rounded rectangle Bal Animation and Effects 1 07-21-2005 09:53 PM
Rounded Rectangle question wharfrat ActionScript 2.0 3 07-04-2005 04:13 AM
Rounded rectangle fun! Big_Rich1 Other Flash General Questions 2 01-11-2005 02:11 PM


All times are GMT. The time now is 06:41 AM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.