Question

我做了一个Coverflow课程，一切正常，但我遇到了一个问题。如果我点击某个项目或使用箭头键浏览图像，我想要一个像这样的图像形成：

1）我想要什么

Wanted cover flow item

我的一切工作正常，我的物体没有正确摆放，它们相互重叠：

2）出了什么问题

Whats wrong

现在你在右侧看到它有点乱，图像不应该像那样重叠，它们应该像在左侧一样定位在彼此之后。

3）构建图像的代码

package be.devine.cp3.itemGroup
{

import com.greensock.TweenLite;
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.MouseEvent;

public class Coverflow extends Sprite
{
    public var images:Array;
    private var _currentImageIndex:int;
    private var imageSize:uint;


    public function Coverflow(images:Array)
    {
        this.images = [];

        for each(var image:DisplayObject in images)
        {
            if(image.width > imageSize)
            {
                imageSize = image.width;
            }
            var imageContainer:Sprite = new Sprite();
            image.x = -1 * (image.width >> 1);
            image.y = -1 * (image.height >> 1);

            imageContainer.addChild(image);
            this.images.push(imageContainer);
        }
        this.currentImageIndex = images.length >> 1;


    }

    private function imageClickHandler(event:MouseEvent):void
    {
        var targ:DisplayObject = event.currentTarget as DisplayObject;
        currentImageIndex = getChildIndex(targ);
    }

    public function display():void
    {
        while(this.numChildren > 0)
        {
            removeChildAt(0);
        }

        var depth:Number = 0;

        for(var i:int = 0; i < images.length; i++)
        {
            var image:DisplayObject = images[i];
            var xPos:Number = 0;
            xPos = (i - _currentImageIndex) * imageSize;

            if(i < _currentImageIndex) { //moet er links van komen -> negatieve x
                image.rotationY = -90; //-45
                depth++;
            } else if(i == _currentImageIndex) {//in het midden            {
                image.rotationY = 0;
                depth = 0;

            } else {//moet rechts komen -> positieve x
                image.rotationY = 90; //45
                depth ++;

            }

            addChild(image);

            TweenLite.to(image,.5, {x:xPos});
            var zPos:int =  (i - _currentImageIndex);
            image.addEventListener(MouseEvent.CLICK, imageClickHandler);

        }

    }

    public function get currentImageIndex():int {
        return _currentImageIndex;
    }

    public function set currentImageIndex(value:int):void {

        value = Math.min(images.length -1, Math.max(0, value));

        if(_currentImageIndex != value)
        {
            _currentImageIndex = value;
            display();
        }
    }

}
}

我已经在网上搜索了，但我找不到关于封面流的类似内容...我知道它必须做一些设置图像的子索引，但我不知道如何计算它：）。我希望有人可以帮助我。

Answer 1

我找到了解决方案:) 我必须在更改子索引之前添加图像并使用setChildIndex而不是addChildAt：

   for(var i:int = 0; i < images.length; i++)
    {
        var image:DisplayObject = images[i];
        var xPos:Number = 0;
        var rY:int = 0;

        xPos = (i - _currentImageIndex) * imageSize;
        addChild(image);

        if(i < _currentImageIndex) { //moet er links van komen -> negatieve x
            rY = -90;
            setChildIndex(image,  numChildren-1);
        } else if(i == _currentImageIndex) {//in het midden            {
            rY = 0;
        } else {//moet rechts komen -> positieve x
            rY = 90;
            setChildIndex(image, 0);
        }
        TweenLite.to(image,.5, {x:xPos, rotationY: rY});
        image.addEventListener(MouseEvent.CLICK, imageClickHandler);

    }

Coverflow - 索引顺序无法按预期工作

1 个答案: