Verwenden von AS3 zum Anwenden von Farbe auf dynamisch erstellte Funkenrechtecke

Question

in FlashBuilder Ich möchte dynamisch 1200 Rechtecke aus einer CSV-Datei erzeugen (dies sind alle unterschiedliche Farben), die eine Aktion auf Click ausführen.

Was ist der beste Weg, dies zu tun? Ich habe gelesen, dass die Zeichnungs-API von Air und Android keine gute Idee ist und ich über die Spark Rectangle-Klasse nachdenke, aber ich kann nicht herausfinden, wie ich eine Farbe darauf anwenden kann, wenn ich sie erzeuge dynamisch mit AS?

Answer 1

Nachdem in Ihrem CSV-Lesen-Schleife der Elemente durch und eine Funktion so etwas wie so nennen:

 private function addRect(color:uint, xPos:Number, yPos:Number, width:Number, height:Number):void { 
      var rect:Rect = new Rect(); 
      rect.x = xPos; 
      rect.y = yPos; 
      rect.width = width; 
      rect.height = height; 
      var fillColor:SolidColor = new SolidColor(color); 
      rect.fill = fillColor; 
      var obj:Group = new Group(); 
      obj.addElement(rect); 
      obj.addEventListener(MouseEvent.CLICK, this.onClick); 
      this.addElement(obj); 
     } 

     private function onClick(e:Event):void { 
      trace("clicked"); 
     } 

Hoffnung, das hilft.

Answer 2

Sie können die gesamte Benutzeroberfläche deklarativ machen. Analysieren Sie die CSV-Datei in Datenstrukturen und fügen Sie sie in eine ArrayCollection ein. In diesem Beispiel habe ich nur drei Samples zusammengestellt.

Dann erstellen Sie eine DataGroup und stellen Sie die dataProvider="rectangles" und dann erstellen Sie eine itemRenderer.

Dieses Beispiel funktioniert gut, IMO:

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" 
       minWidth="955" minHeight="600"> 
    <fx:Script> 
     <![CDATA[ 
      import mx.collections.ArrayCollection; 

      var rectangles:ArrayCollection = new ArrayCollection([ 
       {color: 0x00FF00, x: 5, y: 10, width: 30, height: 40}, 
       {color: 0xFF0000, x: 50, y: 100, width: 300, height: 400}, 
       {color: 0x0000FF, x: 55, y: 10, width: 30, height: 40}, 
       ]); 

     ]]> 
    </fx:Script> 

    <s:DataGroup dataProvider="{rectangles}" itemRenderer="RectangleRenderer" /> 
</s:Application> 

Dann sucht die itemRenderer wie folgt aus:

<?xml version="1.0" encoding="utf-8"?> 
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" 
       autoDrawBackground="true" 
       click="whenClicked()" 
       x="{data.x}" y="{data.y}" 
       width="{data.width}" height="{data.height}"> 
    <fx:Script> 
     <![CDATA[ 
      import mx.controls.Alert; 
      private function whenClicked():void { 
       Alert.show("clicked"); 
      } 
     ]]> 
    </fx:Script> 

    <s:Rect width="100%" height="100%"> 
     <s:fill> 
      <s:SolidColor color="{data.color}" /> 
     </s:fill> 
    </s:Rect> 
</s:ItemRenderer>