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>

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

2 个答案: