Question

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

我想做什么：

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

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

我很新兴。我不知道该怎么做。请有人帮我一个例子。你可以运行我的代码来了解我想要做的事情。

请帮帮我.. 谢谢:)）

这是我目前拥有的整个代码（如果您愿意，U可以在您的计算机上运行它）：

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

Answer 1

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

public class MyImage {

    [Bindable]
    public var source:Class;

    [Bindable]
    public var rotation:Number = 0;

}

现在使用自定义ItemRenderer创建一个List。请注意，我使用了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的内联定义，但我建议您在现实世界中将其移动到单独的类中。为清晰起见，我也忽略了效果 HorizontalLayout将告诉列表水平显示其项目，而不是默认的垂直布局。

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

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

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

[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将执行剩余的工作并旋转ItemRenderer中的实际Image。

如何在flex HGroup中选择一个对象？

1 个答案: