使用AS3将颜色应用于动态创建的火花矩形

Question

在FlashBuilder中，我想从CSV文件（这些颜色全部不同）动态生成大约1200个矩形，这些矩形将在Click上执行操作。

这样做的最佳方法是什么？ 我读过Air和Android上的绘图API并不是一个好主意，并且正在考虑使用Spark Rectangle类，但是如果生成它们，我似乎无法解决如何为其应用颜色的问题。动态使用AS？

Answer 1

读完CSV文件后，遍历元素并调用类似以下的函数：

        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");
        }

希望能有所帮助。

Answer 2

您可以声明性地完成整个UI。 将CSV解析为数据结构，然后将其弹出到ArrayCollection 。 在此示例中，我仅将三个样本放在一起。

然后，创建一个DataGroup并设置dataProvider="rectangles" ，然后创建一个itemRenderer 。

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>

然后， itemRenderer如下所示：

<?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>