View Full Version : dynamically drawing a circle
andr.in
April 24th, 2003, 12:51 PM
ok ilyas? lost?
How can I draw a simple circle using actionscript?
Try not to make it too confusin' =)
kode
April 24th, 2003, 03:27 PM
http://actionscript-toolbox.com/flashmx_drawingtools.php ;)
andr.in
April 24th, 2003, 04:10 PM
that's a good link but I still can't see anything about drawing a circle! :-\
kode
April 24th, 2003, 04:16 PM
Drawing curves and circles
To draw a curve with the Flash drawing API, you use the curveTo method, which requires a control point and an anchor (endpoint). The control point is the "handle" in a quadratic bezier curve which bends the curve to the desired shape. Because there is only one handle per curve instead of two (as in a cubic bezier), some manipulating must be done to correctly draw arcs that are greater than about 45 degrees.
For angles of 45 degrees (an arbitrary point based on experimentation and the fact that it's a multiple of 360) and less, the control point which provides the best arc for a given angle theta is x=r, y=r * tan(theta/2). You can see that this is so by messing around with the control point on this page (http://actionscript-toolbox.com/findanchor.php).
Using that control point for a 45-degree arc, we can connect eight such arcs to form a circle (45 * 8 = 360) with its center at x=100, y=100 and radius = 80 pixels:
MovieClip.prototype.drawCircle = function(r, x, y) {
this.moveTo(x+r, y);
a = Math.tan(22.5 * Math.PI/180);
for (var angle = 45; angle<=360; angle += 45) {
var endx = r*Math.cos(angle*Math.PI/180);
var endy = r*Math.sin(angle*Math.PI/180);
var cx =endx + r*a*Math.cos((angle-90)*Math.PI/180);
var cy =endy + r*a*Math.sin((angle-90)*Math.PI/180);
this.curveTo(cx+x, cy+y, endx+x, endy+y);
}
}
var c80 = this.createEmptyMovieClip("c", 1);
c80.lineStyle(3, 0xaaaaaa, 100);
c80.beginFill(0xcccccc, 100);
c80.drawCircle(80, 100, 100);
c80.endFill();
ahmed
April 24th, 2003, 05:02 PM
see these link: :)
http://www.kirupaforum.com/forums/showthread.php?s=&threadid=11548&highlight=application+programming+interface
http://www.flashdevils.com/showthread.php?s=&threadid=687&highlight=draw+circle
Flashmatazz
April 24th, 2003, 05:04 PM
Nice! =)
lostinbeta
April 24th, 2003, 05:20 PM
Originally by Sen....
MovieClip.prototype.drawCircle = function (x,y,r) {
var c1=r*(Math.SQRT2-1);
var c2=r*Math.SQRT2/2;
this.lineStyle(1, 0x000000, 100);
this.moveTo(x+r,y);
this.curveTo(x+r,y+c1,x+c2,y+c2);
this.curveTo(x+c1,y+r,x,y+r);
this.curveTo(x-c1,y+r,x-c2,y+c2);
this.curveTo(x-r,y+c1,x-r,y);
this.curveTo(x-r,y-c1,x-c2,y-c2);
this.curveTo(x-c1,y-r,x,y-r);
this.curveTo(x+c1,y-r,x+c2,y-c2);
this.curveTo(x+r,y-c1,x+r,y);
return this;
}
andr.in
April 25th, 2003, 07:51 AM
niiicee! I asked this cuz I have no idea what cos,sin and tan are! I think I'll use the one lost posted! Works like a charm! thx
Powered by vBulletin® Version 4.1.10 Copyright © 2012 vBulletin Solutions, Inc. All rights reserved.