0

我有一个按钮可以在每次单击时创建一个图像对象并将该图像对象添加到 Hgroup 中。Hgroup 可以包含一些图像对象。还有另一个按钮来旋转对象。

我想做的事 ：

  1. 能够选择一个对象。
  2. 这样每次单击旋转按钮时，所选对象可以围绕一个点旋转 90 度。
  3. 还想限制容器/Hgroup中添加的项目数。（必须带边框）
  4. 哪个是我可以用于上述目的的最佳容器（列表、边框容器、Hgroup）？

目前我的代码可以做什么： 1. 在每个按钮单击时将图像对象添加到 HGroup 2. 我只能旋转 HGroup 中的第一个项目。

我对 flex 很陌生。我不知道该怎么做。请有人帮我举个例子。你可以运行我的代码来了解我想要做什么。

请帮助我..谢谢:)

这是我目前拥有的全部代码（如果你愿意，你可以在你的电脑上运行它）：

    <fx:Declarations>   
    <s:Rotate id="rotAnim" angleBy="90" duration="1000" target="{myImage}"
              autoCenterTransform="true" />
</fx:Declarations>
<fx:Script>
    <![CDATA[
        import spark.components.Image;

        private function generateImage():Image{
            var image:Image = new Image();
            [Embed(source='assets/test_Image.png')]             
            var myImg1:Class;
            image.source = myImg1;
            image.scaleX = 0.5; 
            image.scaleY = 0.5;             
            return image;
        }
        private function addImageToContainer(event:MouseEvent):void{
            var image1:Image = new Image();             
            image1 = generateImage();               
            holdingArea.addElement(image1);         
        }

        [Bindable]
        private var myImage:Image;          
        private function rotateImage():void {
            myImage = holdingArea.getElementAt(0) as Image;
            if (rotAnim.isPlaying) return;
            rotAnim.play();
        }

    ]]>
</fx:Script>
<s:BorderContainer x="216" y="53" width="319" height="367">

    <s:BorderContainer x="10" y="10" width="297" height="298" >
        <s:HGroup id="holdingArea" x="4" y="5" width="287" height="285">
        </s:HGroup>
    </s:BorderContainer>

    <s:Button x="23" y="324" label="Add Image Object" click="addImageToContainer(event)"/>
    <s:Button x="149" y="324" label="Rotate" click="rotateImage()"/>    

</s:BorderContainer>
4

1 回答 1

0

这是一个如何使用 List 组件实现此目的的示例。
首先创建一个模型对象，它将成为图像状态的表示模型。

public class MyImage {

    [Bindable]
    public var source:Class;

    [Bindable]
    public var rotation:Number = 0;

}

现在使用自定义 ItemRenderer 创建您的列表。请注意，我使用 List 而不是 DataGroup（正如我在评论中建议的那样），因为您需要知道选择了哪个项目。

<s:List id="imageList" dataProvider="{dp}" 
        x="216" y="53" width="319" height="367">

    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer width="20" height="20">
                <s:Image source="{data.source}" rotation="{data.rotation}"
                         horizontalCenter="0" verticalCenter="0" 
                         scaleX=".5" scaleY=".5"/>
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>

    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
</s:List>

<s:Button x="23" y="324" label="Add Image Object" click="addImage()"/>
<s:Button x="149" y="324" label="Rotate" click="rotateImage()"/>

ItemRenderer 中的data属性将填充 和 的实例，MyImage如您所见，我们绑定到它的source和rotation属性。
请注意，为了简洁起见，我在这里使用了 ItemRenderer 的内联定义，但我建议您在现实世界的情况下将它移到单独的类中。为了清楚起见，我还省略了效果。
Horizo​​ntalLayout 将告诉列表水平显示其项目，而不是默认的垂直布局。

现在为 List 创建 dataProvider（它已经在前面的代码中绑定，请参阅{dp}）：

[Bindable]
public var dp:IList = new ArrayCollection();

并在单击 Button 时向其中添加一些项目：

[Embed(source='assets/CalendarIcon.png')] var myImg1:Class;

private function addImage():void {
    var image:MyImage = new MyImage();
    image.source = myImg1;
    dp.addItem(image);
}

List 将自动创建一个新的 ItemRenderer 以在 dataProvider 中反映这个新项目。

现在让我们通过单击第二个按钮来旋转它：

private function rotateImage():void {
    if (imageList.selectedItem) imageList.selectedItem.rotation += 90;
}

您更新rotation所选MyImage实例的 。Binding 将完成其余的工作并Image在 ItemRenderer 中旋转实际。

于 2013-02-16T15:12:45.743 回答