1

我正在制作一个图片库，我希望在屏幕底部有一堆缩略图，当鼠标移动时，它们可以平滑地左右滑动。

我正在使用容器的自定义类（Tiles）和缩略图的自定义类（ImageIcon）。

我有一个允许用户选择画廊的组合框。当用户选择图库时，将运行以下代码并重新加载缩略图。这里的问题是图标彼此重叠而不是并排出现，切换类别也应该删除旧的（参见第一个 for 循环），但事实并非如此。此外，图标的动画效果不正确。动画代码也在下面。现在，只有一个图标会移动。图标应该按顺序从一边移动到另一边，当最后几个图标碰到屏幕边缘时停止，这样它们就不会“丢失”到一边的某个地方。

图库加载程序代码： 

public function loadCategory(xml:XML = null) {
    if (xml != null) {
        dp = new DataProvider(xml);
        for (var k:int = 0; k < this.numChildren; k++) {
            this.removeChild(this.getChildAt(k));
        }

        var black:DropShadowFilter = new DropShadowFilter(0, 45, 0x000000, 1, 3, 3, 1, 1);
        var white:DropShadowFilter = new DropShadowFilter(0, 45, 0xFFFFFF, 1, 2, 2, 1, 1);

        for (var i:int = 0; i < dp.length; i++) {
            var imgicon:ImageIcon = new ImageIcon();
            imgicon.addEventListener(MouseEvent.CLICK, showImage);
            imgicon.width = 100;
            imgicon.x = (i * (imgicon.width + 20));
            imgicon.path = dp.getItemAt(i).data;
            imgicon.loadIcon();
            imgicon.filters = [black, white];

            stage.addEventListener(Event.ENTER_FRAME, moveIcon);
            this.addChild(imgicon);
        }
    } else {
        //Failed to load XML
    }
}

图标动画代码：

public function moveIcon(e:Event){
    var speed = 0;
    speed = Math.floor(Math.abs(this.mouseX/20));

    var image = this.getChildAt(k);

    var imagebox = image.width + 20;

    var edge:Number = (800/2);

    if (this.mouseX > 0) {
        for (var k:int = 0; k < this.numChildren; k++) {
            if (image.x - (imagebox/2) + speed < -edge + (k * imagebox)) {
                speed = 0;
            }

            image.rotationY = Math.floor(image.x/20);
            image.x -= Math.floor(speed);
        }
    } else {
        for (var j = this.numChildren; j >= 0; j--) {
            if (image.x + speed > edge - ((imagebox * j) )) {
                speed = 0;
            }

            image.rotationY = Math.floor(image.x/20);
            image.x += Math.floor(speed);
        }
    }
}
4

1 回答 1

2

在我看来，您有三个问题（您应该将这些问题放在问题的末尾，而不是“我的代码有什么问题？ ”）。编程的主要原则之一是将问题分解成更小的部分。

  1. ImageIcon我如何在彼此旁边排队？
  2. ImageIcon切换类别时如何删除旧的？
  3. 如何ImageIcon根据鼠标位置对所有 s 进行动画处理，并且两边都有约束？

问题 1

我看不出有什么问题，但只要检查一下，当你设置imgicon.x时，它imgicon.width实际上是设置的。

问题2

我将创建一个 currentIcons 数组成员变量，而不是依赖numChildrenand ，当您创建一个 new 时，只需将其推送到数组上。然后当你想删除它们时，你可以像这样循环遍历数组：getChildAt()ImageIcon

for each (var cIcon:ImageIcon in currentIcons) 
{
    cIcon.removeEventListener(MouseEvent.CLICK, showImage);
    removeChild(cIcon);
}
currentIcons = [];

如您所见，我还将删除已添加的所有侦听器。这是最佳实践。然后在我删除所有图标后清除数组。

问题 3

我可以看到您的代码有一些问题。首先，在设置的行中image，k还没有设置！

在这里您也可以使用currentIcons数组，但您可能不能使用for each in循环，因为这会使您的项目乱序。只是一个正常的for循环会更好。

我还没有为 moveIcon 方法测试过这段代码，但这个想法应该可行。不过，您可能必须对其进行调整：

public function moveIcon(e:Event):void 
{
    var speed:Number = Math.floor(this.mouseX / 20); // Removed "abs".
    var imageBox:Number = currentIcons[0].width;
    var edge:Number = 800 / 2;

    for (var i:int = 0; i < currentIcons.length; i++) 
    {
        var image:ImageIcon = currentIcons[i] as ImageIcon;
        image.x += speed;
        image.rotationY = Math.floor(image.x / 20);

        var min:int = -edge + (i * imagebox);
        if (image.x < min) image.x = min;

        var max:int = edge - (imagebox * i);
        if (image.x > max) image.x = max;
    }
}

编辑* 抱歉，它应该比最后一个 if 语句中的要大，但我意外地小于。

于 2010-11-16T20:12:22.580 回答