Using graphics.copyFrom to CircleTheWagons

CircleTheWagons will take an arbitrary Sprite and repeatedly place copies of that Sprite around the perimeter of a circle. Presumably you have drawn something on the graphics layer of the Sprite otherwise it’s sort of boring looking.

graphics.copyFrom
The real key to this approach is being able to copy the graphics drawn on one Sprite to many others. That is done via graphics.copyFrom as such:

someEmptySprite.graphics.copyFrom( spriteWithStuffOnGraphicsLayer.graphics );

Everything else is just looping through a number of times and placing the Sprites around a circle. The easiest way to do that is to use polar coordinates in the loop and then convert those coordinates to x,y for final placement. That way the Sprites can easily be rotated around so that they point to the center.

private function draw():void {
	// remove any existing sprites
	while( this.numChildren > 0 ) {
		this.removeChildAt( 0 );
	}
	
	// Calculate how much to increase the angle each time through the loop.
	var increment:Number = ( 2 * Math.PI ) / _count;
	for( var angle:Number = 0; angle < Math.PI * 2; angle+= increment ) {
		var s:Sprite = new Sprite();
		
		// Copy the graphics layer from _wagon onto the new Sprite.
		s.graphics.copyFrom( _wagon.graphics );
		
		// Place the Sprite by transforming the position from polar coordinates
		s.x = _radius * Math.cos( angle );
		s.y = _radius * Math.sin( angle );
		
		// If rotateInPlace is true then spin the Sprite. 
		if( _rotateInPlace ) {
			s.rotation = 180 + angle * 180 / Math.PI;
		} 
		this.addChild( s );
	}
}

I suppose the next step would be to do the same thing but for Bitmaps. I'll do that some other day.

Using graphics.copyFrom to CircleTheWagons originally appeared on polyGeek.com on December 7, 2010.