Question

如何创建3x3表格（以表格形式），每个单元格都有不同的图像。但我想创建单元格，然后在其中添加图标的图片，而不是使图标成为movieClip并在此之后直接添加。

我想要有3行：

第一行行将是Time1，Time2，Time3。

第二行Turbo1，Turbo2，Turbo3

第三行行将类似于Speed1，Speed2，Speed3。

如下图所示。

（蓝色是我为每个图标使用的图片的位图/ movieClips /名称的名称） enter image description here

我想这样做

private var testArr:Array = new Array();

public function MainClass()
{
  for(var i:int=0; i<3; i++) 
  {
    testArr[i]= new Array();
    for(var j:int = 0 ; j<3 ; j++)
      {
          testArr[i][j] = new IconClass();
          this.addChild(testArr[i][j]);
        testArr[i][j].x=testArr[i][j].width*j + j*10;
        testArr[i][j].y=testArr[i][j].height*i + i*10;
        testArr[i][j].addEventListener(MouseEvent.CLICK, somethingFancy );
   }
}

}

并在新的IconClass（）; 我会传递它需要的图像。但！怎么做？

Answer 1

正如所讨论的那样，有一些有用的设计。为了处理不同状态的不同图像，我将创建一个Icon类，它是一个显示对象，用于处理为不同状态加载的图像。

这看起来像是：

package
{
    import flash.display.Sprite;

    public class icon extends Sprite
    {
        private var _images:Vector.<Object>;
        public var isEnabled:Boolean;

        public function icon() {
            _images = new Vector.<Object>();
        }

        //in this functions all the images you need for different states
        private function addImage( state:String, bitmap:Bitmap ):void {
            _images.push( { state:state, image:bitmap } );
        }

        //change the image of the sprite, based on the state ( i.e. - mouseOver, mouseOut )
        public function changeState( state:String ):void {
            var i:int;
            state = isActive ? "enabled" + state : "disabled" + state;

            for ( ; i < _images.length; i++ ) {
                if ( _images[i].state == state ) {
                    updateImage( _images[i].image );
                }
            }
        }

        private function updateImage( bitmap:Bitmap ):void {
            //do image changing here to new bitmap
        }
    }
}

这里发生的事情是icon类将有一个对象向量，它将正确的位图与正确的状态相关联。现在，如何在表格中设置如下：

private var _iconList:Vector.<icon>;

public function MainClass():void  {   
        createSprites();
        _iconList = new Vector.<icon>();

        var rows    :int = 3, 
        columns     :int = 3, 
        startX      :int = 0, //set to some x coordinate
        startY      :int = 0, //set to some y coordinate
        padding     :int = 5, 
        i           :int, 
        j           :int,
        currentIndex:int;

        for ( i = 0; i < rows; i++ ) {
            for ( j = 0; j < columns; j++ ) {
                _iconList[currentIndex].x = startX + i * ( _iconList[currentIndex].width + padding );
                _iconList[currentIndex].y = startY + j * ( _iconList[currentIndex].height + padding );
                _iconList[currentIndex].addEventListener( MouseEvent.MOUSE_OVER, onMouseOver );
                _iconList[currentIndex].addEventListener( MouseEvent.MOUSE_OUT, onMouseOut );
                addChild( _iconList[currentIndex] );
                currentIndex++;
            }
        }
    }

    private function createIcons():void {
        var i:int;
        for ( ; i < 9; i++ ) {
            var ic:icon = new icon();
            ic.addImage( "disabledMouseOver", "yourImageGetter()" ); //you're using a getAtlas() to a bitmap
            ic.addImage( "disabledMouseOut", "yourImageGetter()" );
            ic.addImage( "enabledMouseOver", "yourImageGetter()" );
            ic.addImage( "enabledMouseOut", "yourImageGetter()" );
            _iconList.push( ic );
        }
    }

    private function onMouseOver( e:MouseEvent ):void {
        var ic:icon = e.target as icon;
        ic.changeState( "MouseOver" );
    }

    private function onMouseOut( e:MouseEvent ):void {
        var ic:icon = e.target as icon;
        ic.changeState( "MouseOut" );
    }

所以这里发生了什么：

我们创建了一个图标类，其中包含不同位图图像的存储空间以及与之关联的不同状态
在我们的主要课程中，我们createIcons()执行新icons并为不同的状态添加不同的图像
然后我们使用_iconList中的图标列表创建我们的表格，并为每个图标添加鼠标事件监听器。
听众onMouseOver和onMouseOut调用目标图标changeState()，然后处理正确的图像以便切换。

编辑：

isEnabled布尔值将由您自行决定（在聊天中讨论）从另一个视图用于控制为用户启用的图标以及MOUSE_OVER和MOUSE_OUT个州使用。

Answer 2

private var iconArr:Array = new Array();
private var testArr:Array = new Array();

public function MainClass()
{
    iconArr.push(

    [
    "time1",
    "time2",
    "time3"
    ],

    [
    "turbo1",
    "turbo2",
    "turbo3"
    ],

    [
    "speed1",
    "speed2",
    "speed3"
    ]

    );
    for(var i:int=0; i<3; i++) 
    {
        testArr[i]= new Array();
        for(var j:int = 0 ; j<3 ; j++)
        {
            //pass in a string, the icon will change depending on that string
            testArr[i][j] = new IconClass(iconArr[i][j]);

            this.addChild(testArr[i][j]);
            testArr[i][j].x=testArr[i][j].width*j + j*10;
            testArr[i][j].y=testArr[i][j].height*i + i*10;
            testArr[i][j].addEventListener(MouseEvent.CLICK, somethingFancy );
        }
    }
}

可能不符合您的需求，在这种情况下您应该对其进行编辑。

如何创建具有不同内容的元素表

2 个答案: