Here's one I just made (and tested) from a draw circle prototype that then draws another circle in reverse (before the endfill is applied -- necessary to get a cutout):

// r1 = radius of outer circle
// r2 = radius of inner circle (cutout)
// x, y = center of donut
MovieClip.prototype.drawDonut = function (r1, r2, x, y) {
  var TO_RADIANS:Number = Math.PI/180;
  this.moveTo(0, 0);
  this.lineTo(r1, 0);

  // draw the 30-degree segments
  var a:Number = 0.268;  // tan(15)
  for (var i=0; i < 12; i++) {
     var endx = r1*Math.cos((i+1)*30*TO_RADIANS);
     var endy = r1*Math.sin((i+1)*30*TO_RADIANS);
     var ax = endx+r1*a*Math.cos(((i+1)*30-90)*TO_RADIANS);
     var ay = endy+r1*a*Math.sin(((i+1)*30-90)*TO_RADIANS);
this.curveTo(ax, ay, endx, endy); }

  // cut out middle (go in reverse)
  this.moveTo(0, 0);
  this.lineTo(r2, 0);

  for (var i=12; i > 0; i--) {
     var endx = r2*Math.cos((i-1)*30*TO_RADIANS);
     var endy = r2*Math.sin((i-1)*30*TO_RADIANS);
     var ax = endx+r2*(0-a)*Math.cos(((i-1)*30-90)*TO_RADIANS);
     var ay = endy+r2*(0-a)*Math.sin(((i-1)*30-90)*TO_RADIANS);
this.curveTo(ax, ay, endx, endy); }

  this._x = x;
  this._y = y;
}

// example usage:
createEmptyMovieClip("d", 1);
d.beginFill(0xaa0000, 60);
d.drawDonut(100, 50, 200, 200);
d.endFill();

Helen

Navneet Behal wrote:

After putting a couple of hours on the problem, I am still in a daze on how would one go about making a doughnut shape (circle with cut-out in the center) using the drawing API.

I'm not talking about drawing a circle using:

lineStyle(BIGNUMBERHERE, color, alpha);

I'd like to put in a gradient fill into a doughnut shape. And it has to be a doughnut, not a simulation of it (ie. not by drawing 2 circles over each other and keeping the center cirlce the same as the background color). Real dunkin' doughnut!

Any ideas?






_______________________________________________
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

Reply via email to