Flex Topology Design-interesting eagleeye

The development of eagleeye is the most tangled thing in Topo graph development. It has been a hard time for me to complete this eagleeye feature.

Eagleeye provides the following functions:

1. view the thumbnail of the entire view

2. View changes are immediately reflected in eagleeye

3. eagleeye Positioning

4. eagleeye Scaling

 

Please read the view of my first design article

 

The eagleeye on the left interacts with the view on the right in real time. In fact, the eagleeye on the left regularly reads the canvas on the left. Scale the data on the canvas to the eagleeye.

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <basesimplecanvas xmlns = "com. shine. framework. view. * "<br/> xmlns: MX = "http://www.adobe.com/2006/mxml" <br/> bordercolor = "0xc4cccc" <br/> borderstyle = "outset" <br/> creationcomplete = "eagerviewcreate () "<br/> verticalscrollpolicy =" off "<br/> horizontalscrollpolicy =" off "<br/> backgroundcolor =" 0 xffffff "> <br/> <mx: SCRIPT> <br/> <! -- [CDATA [<br/> Import MX. containers. canvas; <br/> Import COM. shine. topo. config. singletonmodel; </P> <p> Import MX. core. uicomponent; <br/> Import MX. controls. alert; </P> <p> private var viewcanvas: canvas; </P> <p> Public Function initeagleimage (value: uicomponent ): void <br/>{< br/> viewcanvas = canvas (value); <br/> var bitmapdata: bitmapdata = getbitmapdata (value); <br/> eagleimage. source = new Bitmap (bitmapdata); <br/> B Itmapdata = NULL; <br/> value = NULL; </P> <p> singletonmodel. getinstance (). eagleviewcanvas. resize. enabled = true; <br/>}</P> <p> Public Function eagerviewcreate (): void <br/>{< br/> singletonmodel. getinstance (). eagleviewwidth = This. width; <br/> singletonmodel. getinstance (). eagleviewcanvas = This; </P> <p> // var canvas: canvas = singletonmodel. getinstance (). viewcanvas; <br/> // viewsnopcanvas. width = <br/>}</P> <p> private Fu Nction getbitmapdata (target: uicomponent): bitmapdata <br/>{< br/> var BD: bitmapdata = new bitmapdata (target. width, target. height); <br/> var M: matrix = new matrix (); <br/> BD. draw (target, m); <br/> M = NULL; <br/> Target = NULL; <br/> return BD; <br/>}</P> <p> Public Function effectsize (): void <br/>{< br/> singletonmodel. getinstance (). mapbackup. scalemapposition (resize. value); </P> <p> If (singletonmodel. getinstance (). Datatype = "full") <br/>{< br/> singletonmodel. getinstance (). viewcanvas. fullviewcanvas. resizebackgroupimage (resize. value); <br/>}< br/> else if (singletonmodel. getinstance (). datatype = "Domain") <br/>{< br/> singletonmodel. getinstance (). viewcanvas. domailviewcanvas. resizebackgroupimage (resize. value); <br/>}</P> <p> private function changepoint (): void <br/>{< br/> var canvas: canvas = singletonmodel. Getinstance (). viewcanvas; <br/> If (canvas! = NULL) <br/>{< br/> canvas. horizontalscrollposition = viewcanvas. width * (eagleimage. mousex/eagleimage. width)-canvas. width/2; <br/> canvas. verticalscrollposition = viewcanvas. height * (eagleimage. mousey/eagleimage. height)-canvas. height/2; <br/>}< br/>] --> <br/> </MX: SCRIPT> <br/> <mx: vbox width = "100%" <br/> Height = "100%" <br/> verticalgap = "0" <br/> horizontalgap = "0"> <br/> <MX: image id = "Eagleimage" <br/> maxwidth = "{This. width} "<br/> maxheight =" {This. height-30} "<br/> creationcomplete =" {This. completeloading ()} "<br/> click =" {changepoint ()} "/> <br/> <mx: hbox width = "100%" <br/> Height = "30" <br/> verticalgap = "0" <br/> horizontalgap = "0" <br/> backgroundcolor =" 0xf3f3f3 "> <br/> <mx: hslider id = "resize" <br/> value = "1" <br/> Minimum = "0.6" <br/> maximum = "1.5" <br/> livedragging =" true "<br/> Cha Nge = "{effectsize ()} & quot; <br/> width = "100%" <br/> Height = "100%" <br/> enabled = "false"/> <br/> <mx: label text = "{string (number (string (resize. value ). substring (0, 4) * 100) + '%'} "/> <br/> </MX: hbox> <br/> </MX: vbox> <br/> <! -- <Mx: canvas id = "viewsnopcanvas" <br/> width = "10" <br/> Height = "10" <br/> X = "0" <br/> Y =" 0 "<br/> bordercolor =" 0x0000ac5 "<br/> borderstyle =" outset "/> --> <br/> </basesimplecanvas> <br/>

 

This is the code of the eagleeye canvas. First, declare that this Code cannot be run independently.

 

Public Function initeagleimage (value: uicomponent): void this method is to display the view canvas in eagleeye

Public Function extends tsize (): void controls the zoom of views, including the zoom of the basemap.

Private function changepoint (): void is a function for controlling positioning in eagleeye

 

Eagleeye development is not very difficult, and the most troublesome is eagleeye memory control. Since the view is added to eagleeye, my Flex topology usually occupies too much memory when I was a child. To solve this problem, I have made many attempts to specifically control the memory reclaim problem.

Private function getbitmapdata (target: uicomponent): bitmapdata <br/>{< br/> var BD: bitmapdata = new bitmapdata (target. width, target. height); <br/> var M: matrix = new matrix (); <br/> BD. draw (target, m); <br/> M = NULL; <br/> Target = NULL; <br/> return BD; <br/>}< br/>

 

This write is also used to effectively control the flex memory. If you are interested, I can share some methods to control the flex memory.