0

クリックするたびに画像オブジェクトを作成し、その画像オブジェクトを Hgroup に追加するボタンがあります。Hgroup には、いくつかの画像オブジェクトを含めることができます。オブジェクトを回転させる別のボタン。

私がしたいこと ：

  1. オブジェクトを選択できるようにします。
  2. これにより、回転ボタンをクリックするたびに、選択したオブジェクトをポイントを中心に 90 度回転させることができます。
  3. また、container/Hgroup に追加する項目数を制限したい。
  4. 上記の目的で使用できる最適なコンテナー (リスト、ボーダー コンテナー、Hgroup) はどれですか?

現在、私のコードでできること: 1. ボタンをクリックするたびに画像オブジェクトを HGroup に追加します。 2. HGroup の最初の項目のみを回転できます。

私はフレックスに非常に慣れていません。これを行う方法がわかりません。Pls は、誰かが例で私を助けることができます。自分のコードを実行して、自分が何をしようとしているのかを理解することができます。

Plsは私を助けて..ありがとう:)

これは私が現在持っているコード全体です（必要に応じてコンピューターで実行できます）：

    <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 を使用してリストを作成します。どの項目が選択されたかを知る必要があるため、(コメントで提案したように) DataGroup の代わりに List を使用したことに注意してください。

<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()"/>

dataItemRendererのプロパティは、and のインスタンスで満たされます。ご覧のとおり、 andプロパティMyImageにバインドします。 ここでは簡潔にするために ItemRenderer のインライン定義を使用しましたが、実際の状況では別のクラスに移動することをお勧めします。わかりやすくするために、効果も省略しました。 Horizo​​ntalLayout は、デフォルトの垂直レイアウトではなく、項目を水平に表示するようにリストに指示します。sourcerotation

次に、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 に反映します。

次に、2 番目のボタンをクリックして回転させます。

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

rotation選択したMyImageインスタンスの を更新します。Binding は残りの作業を行いImage、ItemRenderer で実際のオブジェクトを回転させます。

于 2013-02-16T15:12:45.743 に答える