Re: [Flashcoders] Bezier curve arrows
Hi Pual, I just noticed that I had already written something, but it didn't get sent to the list before the question got answered. Oh well...anyways: To find the angle, you have to find the slope of the tangent at that point of the curve; however, this is really easy because with bezier curves you already know the tangents for the end points. the control points for the cage of a bezier are: A(the beginning point that you will be curving from) B(the middle) C(the end point you curved to) the slope of the line AtoB is the slope of the tangent for point A the slope of the line BtoC is the slope of the tangent for point C remember that the slope, m = deltaY/DeltaX, rise over run, (y1-y0)/(x1-x0) Now that you have the slope for each line segment, and since m = tan (theta), then arc tan (m) = theta; therefore, pop in the slope, using Math.atan(m) to get the radian, or Math.atan(m) * 180 /Math.PI to get the degree. You could also use atan2 reducing points by offset, but either way you need to use the ctrl points. Now that you have the degree, if your arrow head are dynamically generated you know how what to translate the points by; however, if they are shapes than with the registration point located at the arrow head tip, then rotating should be a piece of cake from that point. Hope that helps, Anthony On 3/16/2010 12:02 PM, p...@ipauland.com wrote: I was recently asked if I could add some arrowheads to some actionscript generated curves. I initially thought Triangle pointing to end point, and that would be a great solution. I can place a MC at the end of the curve, but how can I get the right angle to point it to? Paul ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Bezier curve arrows
Oops. Just noticed how atrocious the writing was. On 3/18/2010 11:25 AM, Anthony Pace wrote: Hi Pual, I just noticed that I had already written something, but it didn't get sent to the list before the question got answered. Oh well...anyways: To find the angle, you have to find the slope of the tangent at that point of the curve; however, this is really easy because with bezier curves you already know the tangents for the end points. the control points for the cage of a bezier are: A(the beginning point that you will be curving from) B(the middle) C(the end point you curved to) the slope of the line AtoB is the slope of the tangent for point A the slope of the line BtoC is the slope of the tangent for point C remember that the slope, m = deltaY/DeltaX, rise over run, (y1-y0)/(x1-x0) Now that you have the slope for each line segment, and since m = tan (theta), then arc tan (m) = theta; therefore, pop in the slope, using Math.atan(m) to get the radian, or Math.atan(m) * 180 /Math.PI to get the degree. You could also use atan2 reducing points by offset, but either way you need to use the ctrl points. Now that you have the degree, if your arrow head are dynamically generated you know how what to translate the points by; however, if they are shapes than with the registration point located at the arrow head tip, then rotating should be a piece of cake from that point. Hope that helps, Anthony On 3/16/2010 12:02 PM, p...@ipauland.com wrote: I was recently asked if I could add some arrowheads to some actionscript generated curves. I initially thought Triangle pointing to end point, and that would be a great solution. I can place a MC at the end of the curve, but how can I get the right angle to point it to? Paul ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Bezier curve arrows
Hello Paul, [...] how can I get the right angle to point it to? very easy: http://code.google.com/p/bezier/source/browse/trunk/bezier/src/flash/geom/Bezier.as getTangentAngle method. time parameter is 0 for start and 1 for end of bezier. good luck! -- iv http://www.bezier.ru http://bezier.googlecode.com ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
[Flashcoders] Bezier curve arrows
I was recently asked if I could add some arrowheads to some actionscript generated curves. I initially thought Triangle pointing to end point, and that would be a great solution. I can place a MC at the end of the curve, but how can I get the right angle to point it to? Paul ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Bezier curve arrows
Calculate the derivative (the gradient, slope) at the end of the curve. But i have no idea how to do it is as3. Can we even calculate derivatives in AS3? ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Bezier curve arrows
What is the equation of the curve? John Pedro Kostelec wrote: Calculate the derivative (the gradient, slope) at the end of the curve. But i have no idea how to do it is as3. Can we even calculate derivatives in AS3? ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Bezier curve arrows
Actionscript generated curves are quadratic beziers. The angle is easy to get at the end points -- the (quadratic) bezier is defined by three points, one where you start and two that you pass to the curveTo method. By definition, the line defined by those two points is the tangent at the end point. Use Math.atan2 to get the angle, then rotate your clip accordingly. HTH, Mark On Tue, Mar 16, 2010 at 5:02 PM, p...@ipauland.com p...@ipauland.com wrote: I was recently asked if I could add some arrowheads to some actionscript generated curves. I initially thought Triangle pointing to end point, and that would be a great solution. I can place a MC at the end of the curve, but how can I get the right angle to point it to? Paul ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Bezier curve arrows
p...@ipauland.com wrote: I was recently asked if I could add some arrowheads to some actionscript generated curves. I initially thought Triangle pointing to end point, and that would be a great solution. I can place a MC at the end of the curve, but how can I get the right angle to point it to? Paul ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Hi, If it's a 3 point Flash Quadratic Bezier curve with anchors and your arrows point like this - your direction will be along the line from p1-p2 and p2-p3 or something like that? e.g. p1---p2--p3 so graphics.moveTo(p1.x, p1.y); graphics.curveTo(p2.x, p2.y, p3.x, p3.y); v1 = p2 - p1; v2 = p2 - p3; calculate the angle using atan(v1.y / v1.x) and adjust for the quadrant you are in. HTH Glen ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Bezier curve arrows
On 16/03/2010 17:24, Glen Pike wrote: p...@ipauland.com wrote: I was recently asked if I could add some arrowheads to some actionscript generated curves. I initially thought Triangle pointing to end point, and that would be a great solution. I can place a MC at the end of the curve, but how can I get the right angle to point it to? Paul ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Hi, If it's a 3 point Flash Quadratic Bezier curve with anchors and your arrows point like this - your direction will be along the line from p1-p2 and p2-p3 or something like that? e.g. p1---p2--p3 so graphics.moveTo(p1.x, p1.y); graphics.curveTo(p2.x, p2.y, p3.x, p3.y); v1 = p2 - p1; v2 = p2 - p3; calculate the angle using atan(v1.y / v1.x) and adjust for the quadrant you are in. HTH Glen ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Thanks for the suggestions - I shall give it a go. ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
