如何允许用户在 Flex 3 中平滑调整元素的大小

Question

我有一个 Flex 3 应用程序，其中包含用户可以添加到主画布然后调整大小和重新定位的元素。

我使用 3 个关键函数来调整大小，如下所示：

开始调整大小时：

        private function startResize(event:MouseEvent):void
        {
            RESIZE_START_MOUSE_X = event.localX;
            RESIZE_START_MOUSE_Y = event.localY;

            RESIZE_START_WIDTH = this.width;
            RESIZE_START_HEIGHT = this.height;

            RESIZE_START_X = this.x;
            RESIZE_START_Y = this.y;

            RESIZE_BOUND = calculateResizeBound(event);

            addEventListener(MouseEvent.MOUSE_MOVE, resizeMouseHandler);

            isResizing = true;
        }

调整大小完成后：

        private function endResize():void
        {
            RESIZE_START_MOUSE_X = -1;
            RESIZE_START_MOUSE_Y = -1;

            RESIZE_START_WIDTH = this.width;
            RESIZE_START_HEIGHT = this.height;

            RESIZE_START_X = -1;
            RESIZE_START_Y = -1;

            RESIZE_BOUND = '';

            removeEventListener(MouseEvent.MOUSE_MOVE, resizeMouseHandler);

            isResizing = false;             
        }

在用户调整大小时：

        private function resizeMouseHandler(event:MouseEvent):void
        {
            var deltaX:Number = event.localX - RESIZE_START_MOUSE_X;
            var deltaY:Number = event.localY - RESIZE_START_MOUSE_Y;

            if (RESIZE_BOUND.indexOf('T') > -1)
            //We are fixing the top so move the bottom edge
            {
                this.height = RESIZE_START_HEIGHT + deltaY;
            }

            if (RESIZE_BOUND.indexOf('B') > -1)
            //We are fixing the bottom so move the top edge
            {
                this.y = RESIZE_START_Y + deltaY;
                this.height = RESIZE_START_HEIGHT - deltaY;
            }

            if (RESIZE_BOUND.indexOf('L') > -1)
            //We are fixing the left so move the right edge
            {
                this.width = RESIZE_START_WIDTH + deltaX;
            }

            if (RESIZE_BOUND.indexOf('R') > -1)
            //We are fixing the right so move the left edge
            {
                this.x = RESIZE_START_X + deltaX;
                this.width = RESIZE_START_WIDTH - deltaX;
            }

        }

其中引用了另一个函数，称为calculateResizeBound()。这样做是返回一个字符串，指示在调整大小期间哪个边/角应该保持固定。例如，'TL' 表示左上角应保持固定，'BR' 表示右下角，'L' 表示仅左边缘等

当从“正常”位置开始调整大小时，即左上角保持固定，一切正常。与固定的左侧或顶部边缘类似。但是对于底部和右侧的情况，我需要在调整元素大小的同时重新定位元素，因为所有坐标都是从左上角计算的。

我遇到的问题是，当它这样做时，调整大小并不平滑，当你调整它的大小时，它会不断地上下跳跃。不仅如此，当您从“正常”边缘调整大小时，光标位置相对于固定边缘/角保持固定，但是从其他边缘之一，您可以看到它在调整大小时开始偏离边缘/角。

有了这种东西，很容易混淆计算的不同位的 + / - 但由于每次调整大小都在正确的方向上工作，我认为这些都是正确的。

所以问题可能来自同时移动和调整大小，但我找不到解决方法。任何想法/建议将不胜感激

Answer 1

Doug McCune 有一个很棒的 Resize 包装器，您可以使用它来调整元素的大小。然后你只需要在上面添加一个移动器。有关代码/示例，请参阅博客文章：http://dougmccune.com/blog/2007/08/17/my-360flex-slides-and-code/