[英]Using AS3 to apply color to dynamically created spark rectangles
in FlashBuilder I want to dynamically generate approximately 1200 rectangles from a CSV file (these are all different colours) which will perform an action on Click. 在FlashBuilder中,我想从CSV文件(这些颜色全部不同)动态生成大约1200个矩形,这些矩形将在Click上执行操作。
What is the best way to go about doing this? 这样做的最佳方法是什么? I've read that the drawing API on Air and Android is not a good idea, and am thinking about using the Spark Rectangle class, but I can't seem to work out how to apply a colour to it if I'm generating them dynamically using AS? 我读过Air和Android上的绘图API并不是一个好主意,并且正在考虑使用Spark Rectangle类,但是如果生成它们,我似乎无法解决如何为其应用颜色的问题。动态使用AS?
After reading in your CSV, loop through the elements and call a function something like so: 读完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");
}
Hope that helps. 希望能有所帮助。
You can do the entire UI declaratively. 您可以声明性地完成整个UI。 Parse the CSV into data structures, and pop it into an ArrayCollection
. 将CSV解析为数据结构,然后将其弹出到ArrayCollection
。 In this example, I just threw together three samples. 在此示例中,我仅将三个样本放在一起。
Then, create a DataGroup
and set the dataProvider="rectangles"
and then create an itemRenderer
. 然后,创建一个DataGroup
并设置dataProvider="rectangles"
,然后创建一个itemRenderer
。
This example works well, IMO: 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>
Then, the itemRenderer
looks like this: 然后, 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.