Meandering Thought

I've been working with the Flare visualization libraries a bunch lately and found myself wanting to use new shapes to represent nodes of a graph.  With a little research I found its possible to implement the IRenderer interface and set a custom renderer for each node.  This is a pretty simple implementation, but from it I think one can see the possibilities for more complex shapes / colors in data representations.  The following is the client code that sets up the graph and visits each node setting its renderer property ::

 
package {
 
	import com.extralongfingers.graphs.client.render.RoundBlockRenderer;
	import com.extralongfingers.graphs.client.utils.GraphUtil;
 
	import flare.animate.Transitioner;
	import flare.vis.Visualization;
	import flare.vis.data.NodeSprite;
	import flare.vis.data.Tree;
	import flare.vis.operator.layout.TreeMapLayout;
 
	import flash.display.Sprite;
	import flash.geom.Rectangle;
 
	public class Flare_RoundedBlockShapeRenderer extends Sprite
	{
		public function Flare_RoundedBlockShapeRenderer()
		{
			_init();
		}
 
		private function _init() : void
		{
			var t 		: Tree 			= GraphUtil.balancedTree(12,1);
			var vis 	: Visualization = new Visualization( t );
			vis.bounds 					= new Rectangle(0,0,250,250);
 
			vis.data.nodes.visit( _nodeVisit );
 
			var _tml 	: TreeMapLayout = new TreeMapLayout( "size" );
			vis.operators.add( _tml );
			addChild( vis );
			vis.update( new Transitioner(2) ).play();
 
		}
 
		private function _nodeVisit( n : NodeSprite ) : void
		{
			n.renderer 	= RoundBlockRenderer.instance;
			n.shape		= RoundBlockRenderer.ROUNDED_BLOCK;
			n.fillColor = Math.random() * 0xffffffff;
			n.size 		= Math.random();
		}
	}
}
 

And here is my implementation of a custom Renderer called RoundedBlockRenderer that draws a block for the TreeMapLayout with rounded corners instead of 90 degree angle corners.

 
 
package com.extralongfingers.graphs.client.render
{
	import flare.vis.data.DataSprite;
	import flare.vis.data.render.IRenderer;
 
	import flash.display.GradientType;
	import flash.display.Graphics;
	import flash.geom.Matrix;
 
	public class RoundBlockRenderer implements IRenderer
	{
 
		public static const ROUNDED_BLOCK : String = "roundedblock";
 
		private static var _instance:RoundBlockRenderer = new RoundBlockRenderer();
 
		public var _defaultSize:Number;
 
		public static function get instance():RoundBlockRenderer { return _instance; }
 
		public function RoundBlockRenderer(defaultSize : Number = 6)
		{
			this._defaultSize = defaultSize;
		}
 
		public function render(d:DataSprite):void
		{
			var size:Number = d.size * _defaultSize;
			var g : Graphics = d.graphics;
			g.clear();
			var _n : Number = Math.random();
			g.beginGradientFill( 	GradientType.LINEAR,
									[ 0xffffffff* _n,0xaaaaaaaa* _n, 0x8c8c8cff* _n, 0x000000 ],
									[ .8, .8, .8, .8 ],
									[ 0,96, 128, 180 ],
									new Matrix()
								);
 
			switch( d.shape ) {
 
				case ROUNDED_BLOCK:
					g.drawRoundRect(d.u-d.x, d.v-d.y, d.w, d.h, 8, 8);
				break;
			}
 
		}
 
	}
}
 

Source Code ::Rounded Block Renderer Source.

§ 2 Responses to “Custom ShapeRenderer for Flare in Actionscript 3”

• 
  Fatal error: Call to undefined function: get_avatar() in /home/content/e/l/g/elgrumpy/html/wordpress/wp-content/themes/oulipo/legacy.comments.php on line 30