<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
width="500"
height="520"
viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import flexlib.events.ImageMapEvent;
import mx.managers.CursorManager;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.core.UIComponent;
[Bindable] public var timeSpent : Number = 0;
private var tab:Array = new Array();
public function initDrawing(nbPoint:int) : void
{
this.backgroundCanvas.removeAllChildren();
this.imgMap = new ImageMap();
initImageMap();
this.backgroundCanvas.addChildAt(this.imgMap, 0);
this.uic = new UIComponent();
this.backgroundCanvas.addChildAt(this.uic, 1);
this.backgroundCanvas.removeChild(imgMap);
for(var i:int=0; i<nbPoint; i++)
{
var xCoord:Number = Math.random()*450;
var yCoord:Number = Math.random()*350;
var diam:Number = 4;
tab = createShapeArea(xCoord, yCoord, diam, tab);
}
this.backgroundCanvas.addChildAt(imgMap, 0);
this.imgMap.source = this.uic;
this.imgMap.map = tab;
}
public function initImageMap() : void
{
this.imgMap.scaleContent = true;
this.imgMap.setStyle('outlineAlpha', 0.5);
this.imgMap.setStyle('outlineColor', Math.random() * 0xffffff);
this.imgMap.setStyle('fillAlpha', 0.5);
this.imgMap.setStyle('fillColor', Math.random() * 0xffffff);
this.imgMap.showToolTips = true;
this.imgMap.addEventListener(ImageMapEvent.SHAPE_CLICK, clickOnShape);
this.imgMap.map = new Array();
}
private function clickOnShape(event:ImageMapEvent) : void
{
navigateToURL(new URLRequest(event.href), event.linkTarget);
}
private function createShapeArea(xCoord:Number, yCoord:Number, diam:Number, tab:Array) : Array
{
var shapeArea:flexlib.controls.area = new flexlib.controls.area();
shapeArea['alt'] = 'mon point test';
shapeArea['shape'] = 'CIRCLE';
shapeArea['coords'] = xCoord+', '+yCoord+', '+diam;
shapeArea['href'] = 'http://cdsweb';
shapeArea['target'] = '_blank';
tab.push(shapeArea);
return tab;
}
public function addDrawing(nbPoint:int) : void
{
for(var i:int=0; i<nbPoint; i++)
{
var xCoord:Number = Math.random()*450;
var yCoord:Number = Math.random()*350;
var diam:Number = 4;
tab = createShapeArea(xCoord, yCoord, diam, tab);
}
this.backgroundCanvas.addChildAt(imgMap, 0);
this.imgMap.source = this.uic;
this.imgMap.map = tab;
}
/************** One by one *******************/
public function initDrawingOneByOne(nbPoints:int) : void
{
this.backgroundCanvas.removeAllChildren();
this.imgMap = new ImageMap();
initImageMap();
this.backgroundCanvas.addChildAt(this.imgMap, 0);
var timer:Timer = new Timer(1000, 30);
timer.addEventListener(TimerEvent.TIMER, drawOneCircle);
timer.start();
}
private function drawOneCircle(event:TimerEvent) : void
{
this.backgroundCanvas.removeAllChildren();
var shapeA:flexlib.controls.area = new flexlib.controls.area();
shapeA = createShapeAreaOne(Math.random()*450, Math.random()*350, 4);
this.imgMap.map.push(shapeA);
this.backgroundCanvas.addChild(this.imgMap);
}
private function createShapeAreaOne(xCoord:Number, yCoord:Number, diam:Number) : flexlib.controls.area
{
var shapeArea:flexlib.controls.area = new flexlib.controls.area();
shapeArea['alt'] = 'mon point test';
shapeArea['shape'] = 'CIRCLE';
shapeArea['coords'] = xCoord+', '+yCoord+', '+diam;
shapeArea['href'] = 'http://cdsweb';
shapeArea['target'] = '_blank';
return shapeArea;
}
/************ byEnterFrame *********************/
private var numDrawByEnterFrame:int = 50;
public function initDrawingByEnterFrame(nbPoints:int) : void
{
initImageMap();
this.imgMap.addEventListener(Event.ENTER_FRAME, drawCircleByEnterFrame);
this.imgMap.setConstraintValue('nbPoints', nbPoints);
}
private function drawCircleByEnterFrame(event:Event) : void
{
var drawCount:int = this.imgMap.getConstraintValue('nbPoints');
if (drawCount <= 0)
{
this.imgMap.removeEventListener(Event.ENTER_FRAME, drawCircleByEnterFrame);
}
else
{
for (var i:int = 0; i<numDrawByEnterFrame; i++)
{
var shapeA:flexlib.controls.area = new flexlib.controls.area();
shapeA = createShapeAreaOne(Math.random()*450, Math.random()*350, 4);
this.imgMap.map.push(shapeA);
}
drawCount -= numDrawByEnterFrame;
this.imgMap.setConstraintValue('nbPoints', drawCount);
}
}
]]>
</mx:Script>
<mx:VBox
width="100%"
height="20%"
>
<mx:HBox>
<mx:Label
text="Number of circle to draw"
/>
<mx:TextInput
id="nbPoints"
text="1000"
/>
</mx:HBox>
<mx:HBox>
<mx:Button
label="Draw"
click="initDrawing(parseInt(nbPoints.text));"
/>
<mx:Button
label="Add circles"
click="addDrawing(parseInt(nbPoints.text));"
/>
</mx:HBox>
<mx:HBox>
<mx:Button
label="Draw one by one"
click="initDrawingOneByOne(parseInt(nbPoints.text));"
/>
</mx:HBox>
<mx:HBox>
<mx:Button
label="Draw by enter frame"
click="initDrawingByEnterFrame(parseInt(nbPoints.text));"
/>
</mx:HBox>
</mx:VBox>
<mx:HBox
width="100%"
height="80%"
>
<mx:Canvas
id="backgroundCanvas"
borderColor="red"
borderStyle="solid"
width="100%"
height="100%"
>
<mx:UIComponent
id="uic"
height="100%"
width="100%"
/>
<ImageMap
id="imgMap"
width="100%"
height="100%"
xmlns="flexlib.controls.*"
>
</ImageMap>
</mx:Canvas>
</mx:HBox>
</mx:Application>