June 29, 2009

Dynamically draw ploygon in Flex

Hi,
In below example is very nice one for dynamically add the polygon based on the mouse click and it allows only for four sides. The below example code fully written in action script.

private var drawPanel:Sprite;
private var numSpot:Number = 0;
private var line:Shape;
private var _lineArr:Array;
private function onDrawTriangle():void
{
var ui:UIComponent = new UIComponent();
drawPanel = new Sprite();
drawPanel.graphics.clear();
drawPanel.graphics.lineStyle(2, 0xFF0000);
drawPanel.graphics.beginFill(0xDEFACE);
drawPanel.graphics.drawRect(0,0,300,300);
drawPanel.graphics.endFill();
ui.addChild(drawPanel);
addChild(ui);
ui.x = 20;
ui.y = 20;

_lineArr = new Array();
line = new Shape();
drawPanel.addEventListener(MouseEvent.CLICK,onAddPoint);
}

private function onAddPoint(evt:MouseEvent):void
{
if(numSpot <= 4)
{
var point:Sprite = new Sprite();
point.graphics.clear();
point.graphics.lineStyle(0,0x0000FF);
point.graphics.beginFill(0x0000FF);
point.graphics.drawCircle(0,0,5);
point.graphics.endFill();

point.x = evt.localX;
point.y = evt.localY;
_lineArr.push({x:point.x,y:point.y});
drawPanel.addChild(point);
if(numSpot > 0)
drawLine();
numSpot++;
}
}

private function drawLine():void
{
line.graphics.clear();
line.graphics.lineStyle(2,0x000000);
if(_lineArr.length > 2)
line.graphics.beginFill(0xFF0000,0.5);
line.graphics.moveTo(_lineArr[0].x,_lineArr[0].y);
for(var i:int=1;i<_lineArr.length;i++)
{
line.graphics.lineTo(_lineArr[i].x,_lineArr[i].y);
}
line.graphics.lineTo(_lineArr[0].x,_lineArr[0].y);
if(_lineArr.length > 2)
line.graphics.endFill();
drawPanel.addChildAt(line,0);
}

No comments:

Post a Comment