Hi,
thanks for the reply.
I tried implementing that. It sort of works except my textbox orbits my object as it moves.
I am getting really desperate, this project has taken WAY too long.
I have come so far, but I am failing near the finish.
could you find time to look at my code?
Each textbox should stay inside the angle it represents as the dots are dragged.
The code is below, but I am also attaching a fla
my attempt at positioning is at line 245
I really am begging for help at this point!!
var item:MovieClip;
var dragOffsetX:int;
var dragOffsetY:int;
var itemOffsetXY:int;
var stageW:int = 800;
var stageH:int = 650;
var dotHalf:Number = kite_mc.dot1_mc.width/2;
var bSpace:int = 1;
var tSpace:int = 2;
var angleTextOffset:Number = kite_mc.dot1_mc.width;
//add event listeners to all dots
kite_mc.dot1_mc.addEventListener(MouseEvent.MOUSE_DOWN, onItemDragStart);
kite_mc.dot2_mc.addEventListener(MouseEvent.MOUSE_DOWN, onItemDragStart);
kite_mc.dot3_mc.addEventListener(MouseEvent.MOUSE_DOWN, onItemDragStart);
kite_mc.dot4_mc.addEventListener(MouseEvent.MOUSE_DOWN, onItemDragStart);
kite_mc.dot5_mc.addEventListener(MouseEvent.MOUSE_DOWN, onItemDragStart);
function onItemDragStart( e:MouseEvent ):void {
item = e.target.parent as MovieClip;
//drag 1 mirror movement to 3 and x movement to 5
function dragItem1(e:MouseEvent):void{
var topLeft:Point = item.parent.globalToLocal( new Point( 0, 0 ) );
var bottomRight:Point = item.parent.globalToLocal( new Point( stageW, stageH ) );
item.x = Math.min( Math.max( item.parent.mouseX + dragOffsetX, topLeft.x + itemOffsetXY ), bottomRight.x - itemOffsetXY );
item.y = Math.min( Math.max( item.parent.mouseY + dragOffsetY, topLeft.y + itemOffsetXY ), bottomRight.y - itemOffsetXY );
kite_mc.dot3_mc.x = item.x;
kite_mc.dot3_mc.y = item.y * -1;
kite_mc.dot5_mc.x = item.x;
loop();
}
//drag 2 or 4 restrict movement to X plane
function dragItem24(e:MouseEvent):void{
var topLeft:Point = item.parent.globalToLocal( new Point( 0, 0 ) );
var bottomRight:Point = item.parent.globalToLocal( new Point( stageW, stageH ) );
item.x = Math.min( Math.max( item.parent.mouseX + dragOffsetX, topLeft.x + itemOffsetXY ), bottomRight.x - itemOffsetXY );
loop();
}
//drag 3 mirror movement to 1 and x movement to 5
function dragItem3(e:MouseEvent):void{
var topLeft:Point = item.parent.globalToLocal( new Point( 0, 0 ) );
var bottomRight:Point = item.parent.globalToLocal( new Point( stageW, stageH ) );
item.x = Math.min( Math.max( item.parent.mouseX + dragOffsetX, topLeft.x + itemOffsetXY ), bottomRight.x - itemOffsetXY );
item.y = Math.min( Math.max( item.parent.mouseY + dragOffsetY, topLeft.y + itemOffsetXY ), bottomRight.y - itemOffsetXY );
kite_mc.dot1_mc.x = item.x;
kite_mc.dot1_mc.y = item.y * -1;
kite_mc.dot5_mc.x = item.x;
loop();
}
//****************
//drag 5 move the whole parent kite? not working
function dragItem5(e:MouseEvent):void {
var topLeft:Point=item.parent.globalToLocal(new Point(0,0));
var bottomRight:Point=item.parent.globalToLocal(new Point(stageW, stageH));
item.x=Math.min(Math.max(item.parent.mouseX+dragOffsetX,topLeft.x+itemOffsetXY),bottomRight.x-itemOffsetXY);
item.y=Math.min(Math.max(item.parent.mouseY+dragOffsetY,topLeft.y+itemOffsetXY),bottomRight.y-itemOffsetXY);
//
var newPoint:Point=item.localToGlobal(new Point(item.x, item.y));
kite_mc.x = newPoint.x;
kite_mc.y = newPoint.y;
loop();
}
//draw kite one last time just in case fast mouse movement gets dot ahead of line
//remove all possible move move listeners
function onItemDragStop( e:MouseEvent ):void {
loop();
stage.removeEventListener( MouseEvent.MOUSE_MOVE, dragItem1 );
stage.removeEventListener( MouseEvent.MOUSE_MOVE, dragItem24 );
stage.removeEventListener( MouseEvent.MOUSE_MOVE, dragItem3 );
stage.removeEventListener( MouseEvent.MOUSE_MOVE, dragItem5 );
stage.removeEventListener( MouseEvent.MOUSE_UP, onItemDragStop );
}
function radToDeg(n:Number):Number {
return n / Math.PI * 180;
}
function degToRad(n:Number):Number {
return n * Math.PI / 180;
}
function rd(n:Number):Number {
return Math.round(n * 100) / 100;
}
//draw and fill the kite
//calculate all distances and angles (eventually)
function loop():void{
//clear lines and fill
kite_mc.graphics.clear();
//create and define point variables
var a:Point = new Point(kite_mc.dot1_mc.x, kite_mc.dot1_mc.y);
var b:Point = new Point(kite_mc.dot2_mc.x, kite_mc.dot2_mc.y);
var c:Point = new Point(kite_mc.dot3_mc.x, kite_mc.dot3_mc.y);
var d:Point = new Point(kite_mc.dot4_mc.x, kite_mc.dot4_mc.y);
var f:Point = new Point(kite_mc.dot5_mc.x, kite_mc.dot5_mc.y);
//var a1:Point = new Point(
var dotProductBAF:Number = vector1.x * vector5.x + vector1.y * vector5.y;//angle1
var dotProductABF:Number = vector1.x * vector7.x + vector1.y * vector7.y;//angle2
var dotProductCBF:Number = vector2.x * vector7.x + vector2.y * vector7.y;//3
var dotProductFCB:Number = vector6.x * vector2.x + vector6.y * vector2.y;//4
var dotProductDCF:Number = vector3.x * vector6.x + vector3.y * vector6.y;//5
var dotProductCDF:Number = vector3.x * vector8.x + vector3.y * vector8.y;//6
var dotProductADF:Number = vector4.x * vector8.x + vector8.y * vector8.y;//7
var dotProductDAF:Number = vector4.x * vector5.x + vector4.y * vector5.y;//8
var dotProductAFD:Number = vector5.x * vector8.x + vector5.y * vector8.y;//9
//create angle variables
var angle1:Number;
var angle2:Number;
var magBA = Point.distance(b, a);//v1
var magBC = Point.distance(b, c);//v2
var magCD = Point.distance(c, d);//v3
var magDA = Point.distance(d, a);//v4
var magAF = Point.distance(a, f);//v5
var magCF = Point.distance(c, f);//v6
var magBF = Point.distance(b, f);//v7
var magDF = Point.distance(d, f);//v8
var angleBAF = Math.acos(dotProductBAF / (magBA * magAF));//angle1, v1 v5
var angleABF = Math.acos(dotProductABF / (magBA * magBF));//2, v1 v7
var angleCBF = Math.acos(dotProductCBF / (magBC * magBF));//3, v2 v7
var angleFCB = Math.acos(dotProductFCB / (magBC * magCF));//4, v2 v6
var angle_BAF = int(180-rd(radToDeg(angleBAF)));//1
var angle_ABF = int(rd(radToDeg(angleABF)));//2
var angle_CBF = int(rd(radToDeg(angleCBF)));//3
var angle_FCB = int(rd(radToDeg(angleFCB)));//4
var angle_DCF = int(180-rd(radToDeg(angleDCF)));//5
var angle_CDF = int(rd(radToDeg(angleCDF)));//6
var angle_ADF = int(rd(radToDeg(angleADF)));//7
var angle_DAF = int(rd(radToDeg(angleDAF)));//8
var angle_AFD = int(rd(radToDeg(angleAFD)));//9
//draw the lines and fill
kite_mc.graphics.lineStyle(0);
kite_mc.graphics.moveTo(a.x,a.y); ///This is where we start drawing
kite_mc.graphics.beginFill(0x9DA8D0, .3);
kite_mc.graphics.lineTo(b.x, b.y);
kite_mc.graphics.lineTo(c.x, c.y);
kite_mc.graphics.lineTo(d.x, d.y);
kite_mc.graphics.lineTo(a.x, a.y);
kite_mc.graphics.endFill()
kite_mc.graphics.lineTo(f.x, f.y);
kite_mc.graphics.lineTo(c.x, c.y);
kite_mc.graphics.moveTo(d.x,d.y);
kite_mc.graphics.lineTo(f.x, f.y);
kite_mc.graphics.lineTo(b.x, b.y);
//write angles to textboxes and position
//1
kite_mc.angle1Text_mc.angle_txt.text = angle_BAF.toString();
//kite_mc.angle1Text_mc.x = kite_mc.dot1_mc.x -(dotHalf + tSpace);
//kite_mc.angle1Text_mc.y = kite_mc.dot1_mc.y + (dotHalf - tSpace);
//heres me trying to set the first angle text in place
var boxPosition1:Object = {theta:angle_BAF/2, radius:angleTextOffset};
setPosition(kite_mc.angle1Text_mc, boxPosition1);
if you try it with this I get something vaguely right at first glance.
as you move the top dot it drifts out of the desired location.
I am way out of my math depth at this point.
I am converting angle_BAF to radians
is the angle angleBAF of use? about line 168.
I don't want to be converting to degrees and then back again.
Any advice on how to get the angle text to stay in the right spot inside the angle it refers to would be great, maybe my approach is all wrong
here is where I am trying to get to, last item on the page "exploring kites interactiive" http://www.hotmaths.com.au/FreeActivities/
PHP Code:
function degToRad(n:Number):Number { return n * Math.PI / 180; }
//heres me trying to set the first angle text in place //no idea why its +90 that seems vaguely right for a while, just guessed var rad1:Number = degToRad(angle_BAF + 90 /2);//see function line 114 var boxPosition1:Object = {theta:rad1, radius:angleTextOffset}; setPosition(kite_mc.angle1Text_mc, boxPosition1);
Ok, take a look at the attached diagram - you have the size of the BAF angle (red arc). You want your text in the center of that (orange dot) so divide it in half.
This is the angle you need, but it's not in the correct relation to Flash's own rotation system (counter-clockwise from the x axis). To get there, add 90° (or .5 radians - see the yellow arrow) to the angle - you'll need to tweak this for each angle, otherwise you'll always be below-left of each vertex.
Now - convert that to cartesian to get your relative x,y position (note - this is relative to 0,0 - the top left of the screen). So you'll want to add the point you just generated to the tip of the kite (it looks like you're doing this already). Now your textfield's top-left corner should be right on the orange dot.
Finally, correct for the size of the textfield by subtracting half of the textWidth from .x and half of the textHeight from .y - now your textfield should be perfectly centered on the orange dot.
Please use [php] or [code] tags, and mark your threads resolved 8)
Hi,
wanted to say thanks for giving me some geometry info and making me dig in myself and solve it.
I did as you suggested and divided the angle and added compensation, then turned it back into radians.
This was as you said different for every angle. It worked.
I went to bed and couldn't sleep, my brain kept telling me that the fact you previously explained to me that the midpoint between 2 point is always
Mymc.x = (a.x + b.x) / 2;
Mymc.y = (a.y + b.y) / 2;
was important.
I realized that a new point at the midpoint between the 2 could give the angle in flash co-ordinate system without any adjustments being needed.
finally I got up at 2am and wrote this, worked first time!
1 function, works for every angle, would work in any triangle. Maybe someone else will find it useful
Thanks again
PHP Code:
//I already have all points declared and have angles in degrees.
/*function to locate the angles display text.
accepts 3 points already declared in loop function that define displayed angle,
these are the dot locations, p1 is the point where the angle will be displayed
next, the movieclip that displays the angle text(kite_mc.angle1Text_mc etc..)
last, the angle value to display calculated in loop function (var angle_BAC etc)*/
function displayAngle(p1:Point, p2:Point, p3:Point, t:MovieClip, da:int) {
var angle:Number;// angle to place text at from dot
var textAdjust:int;//distance to place text at from dot
//for clarity adjust distance from dot, when angle gets small move text further out
if (da<textPos) {
textAdjust = textPos + (textPos * 2) - (da * 2);
} else {
textAdjust=textPos;
}
//get a point midway between 2 outer dots
var hp:Point = new Point((p2.x + p3.x)/2, (p2.y + p3.y)/2);
//calculate angle from point 1 to that mid point, this is center of displayed angle
angle = Math.atan2(p1.y - hp.y, p1.x - hp.x) + (Math.PI);
//use the angle and textAdjust distance to place the textbox
var myPolar:Object={theta:angle,radius:textAdjust};
t.x=p1.x+myPolar.radius*Math.cos(myPolar.theta);
t.y=p1.y+myPolar.radius*Math.sin(myPolar.theta);
//display the angle text in the textfield
t.angle_txt.text=da.toString();
}
[RESOLVED] position a textbox a certain distance from an object at a particular angle
Reply With Quote
