How to draw and resize polygon using mouse - apache-flex

Question

In my web application i need to draw shapes in the image using mouse.But i was struck draw and resize polygon..i have dawned polygon..How to resize it?
i can able to draw polygon using the above code.
But i need to resize it..any idea to resize the drowned polygon?
Please refer the below code.
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 <= 10) {
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);
}

Answer 1

Rather pushing points to array you may push the point(sprite variable).
Have a look on the modified codes for the above codes where I added some more events to re size the polygon
Here is the sample code:
private function onDrawTriangle() : void {
var ui:SpriteVisualElement = new SpriteVisualElement();
//ui.x = 20;
//ui.y = 20;
addElement(ui);
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);
_lineArr = new Array();
line = new Shape();
drawPanel.addEventListener(MouseEvent.CLICK,onAddPoint);
}
private function onAddPoint(evt:MouseEvent) : void {
if(numSpot <= 10) {
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 = mouseX;
point.y = mouseY;
point.addEventListener(MouseEvent.MOUSE_DOWN , onDown);
_lineArr.push(point);
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);
}
protected function onDown(event:MouseEvent):void
{
var point:Sprite = event.currentTarget as Sprite;
point.addEventListener(Event.ENTER_FRAME , onResize);
point.addEventListener(MouseEvent.MOUSE_UP , onUp);
drawPanel.removeEventListener(MouseEvent.CLICK,onAddPoint);
}
protected function onResize(event:Event):void
{
var point:Sprite = event.currentTarget as Sprite;
point.x = mouseX;
point.y = mouseY;
drawLine();
}
protected function onUp(event:MouseEvent):void
{
var point:Sprite = event.currentTarget as Sprite;
point.removeEventListener(Event.ENTER_FRAME , onResize);
point.removeEventListener(MouseEvent.MOUSE_UP , onUp);
drawPanel.addEventListener(MouseEvent.CLICK,onAddPoint);
}