如何在 flex HGroup 中选择一个对象? [英] How to select an object in a flex HGroup?

问题描述

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

I have a button to create a image object every time its clicked and add that image object in to the Hgroup. The Hgroup could contain a few image objects. And another button to rotate the object.

我想做什么:

1. 能够选择对象.
2. 因此，每次单击旋转按钮时，所选对象都可以围绕一个点旋转 90 度.
3. 还要限制container/Hgroup中添加的items数量.(必须有边框)
4. 哪个是我可以用于上述目的的最佳容器(列表、边框容器、Hgroup)?

1. To be able to select a object.
2. So that selected object can be rotated 90 degrees about a point each time the rotate button is clicked.
3. Also want to limit the number of items added in the container/Hgroup.(Must be with the border)
4. Which is the best container(list, border container, Hgroup) that I can use for the above purpose ?

目前我的代码可以做什么:1. 每次单击按钮时将图像对象添加到 HGroup2.我只能轮换HGroup中的第一项.

Currently what my codes can do : 1. Add image object to HGroup on each button click 2. I can only rotate the first item in the HGroup.

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

I am very new to flex. I have no idea how to go about doing this. Pls can someone help me out with a example. U can run my codes to get the idea of what I am trying to do.

请帮帮我..谢谢:)

这是我目前拥有的完整代码(如果您愿意，可以在您的计算机上运行它):

This is the entire code I Have currently (U can run it in your computer if u wish) :

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

推荐答案

这里有一个示例，说明如何使用 List 组件实现此目的.
首先创建一个模型对象，该对象将成为图像状态的表示模型.

Here's an example of how you could achieve this with a List component.
First create a model object that is going to be the presentation model for your image's state.

public class MyImage {

    [Bindable]
    public var source:Class;

    [Bindable]
    public var rotation:Number = 0;

}

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

Now create your a List with a custom ItemRenderer. Note that I used List instead of DataGroup (as I suggested in the comments) because you need to know which item was selected.

<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 和旋转 属性.
请注意，为了简洁起见，我在这里使用了 ItemRenderer 的内联定义，但我建议您在实际情况下将其移动到一个单独的类中.为了清楚起见，我还省略了效果.
Horizo​​ntalLayout 将告诉列表水平显示其项目，而不是默认的垂直布局.

The data property in the ItemRenderer is going to be filled with instances of MyImage and as you can see we bind to its source and rotation properties.
Note that I used an inline definition of the ItemRenderer here for brevity, but I suggest you move it into a separate class in a real world situation. I also left out the effect for clarity.
The HorizontalLayout will tell the list to display its items horizontally instead of the default vertical layout.

现在为List创建dataProvider(它已经在前面的代码中绑定，见{dp}):

Now create the dataProvider for the List (it was already bound in the previous code, see {dp}):

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

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

and add some items to it when the Button is clicked:

[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 中反映这个新项目.

The List will automatically create a new ItemRenderer to reflect this new item in the dataProvider.

现在让我们点击第二个按钮来旋转它:

And now lets rotate it by clicking on the second Button:

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

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

You update the rotation of the selected MyImage instance. The Binding will do the rest of the work and rotate the actual Image in the ItemRenderer.

这篇关于如何在 flex HGroup 中选择一个对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！