actionscript-3 - ActionScript 3.0 中最轻量级的按钮实现

Question

关闭。这个问题是 opinion-based 。目前不接受答案。

---

想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 .

已关闭10 年前。

Improve this question

因为按钮是最流行的 GUI 组件之一 this question becomes hot当我们谈论memory usage时。特别是当你有tons of buttons时在您的应用程序中。

那么如何实现一个使用 minimum CPU and memory resources 的按钮是的，它的作用就像普通按钮一样，实现了鼠标向上、向下和手指针行为。 标签文本也是必需的。

Answer 1

如果您希望使用最少的 RAM 和处理能力拥有大量带有文本和图形的按钮，那么您应该使用位图。

这会变得更加复杂，需要您自己准备以下内容:

1. Sprite 表形式的字体。
2. 管理使用 Sprite 表将文本渲染到位图上的类。
3. 位图不响应 MouseEvent，因此您需要构建自己的系统来管理位图上的鼠标输入。

首先，让我们看一下您认为我们最适合使用的一些 DisplayObject 的基本内存消耗。这是我们的测试方法:

function ram(type:Class):void
{
    trace(getSize(new type()));
}

这是测试:

ram(Sprite); // 408
ram(Shape); // 236
ram(TextField); // 1316

在您的例子中，绘制 1000 个按钮将导致使用超过 1,724,000 字节的内存。

现在让我们看看我们将使用什么:

1. 1x 位图充当容纳所有按钮的 Canvas :236 字节。
2. 1x BitmapData 代表每个按钮的初始状态。
3. 1x BitmapData 代表每个按钮的鼠标悬停状态。
4. 1x BitmapData 将我们的文本存储为 Sprite 表以供所有按钮使用。

每个BitmapData都会消耗相当大的内存，并且根据其内容的不同而变化很大。但这里的技巧是我们只使用一个并为我们想要绘制的每个按钮引用它的内容。

我已经设置了少量代码来帮助您入门。您仍然需要实现一个点击管理器，它循环遍历所有按钮并找出与触发点击最相关的按钮，并在按钮上呈现文本。

这是 Button 类:

public class BitmapButton
{

    private var _text:String;
    private var _position:Point = new Point();


    public function BitmapButton(text:String)
    {
        _text = text;
    }


    public function render(canvas:BitmapData, font:BitmapData, state:BitmapData):void
    {
        canvas.copyPixels(state, state.rect, _position);

        // Use font argument to render text.
        // For you to implement.
    }


    public function get position():Point{ return _position; }

}

下面是管理这些按钮渲染的类:

public class ButtonCanvas extends Bitmap
{

    private var _fontSprite:BitmapData;
    private var _baseState:BitmapData = new BitmapData(100, 30, false, 0xFF0000);
    private var _overState:BitmapData = new BitmapData(100, 30, false, 0x00FF00);
    private var _buttons:Vector.<BitmapButton> = new <BitmapButton>[];
    private var _checkRect:Rectangle = new Rectangle();


    public function ButtonCanvas(width:int, height:int)
    {
        bitmapData = new BitmapData(width, height, true, 0x00000000);

        // Replace with actual loaded sprite sheet.
        _fontSprite = new BitmapData(1, 1);
    }


    public function add(button:BitmapButton):void
    {
        _buttons.push(button);
    }


    public function render():void
    {
        if(stage === null) return;

        bitmapData.lock();
        for each(var i:BitmapButton in _buttons)
        {
            _checkRect.x = i.position.x;
            _checkRect.y = i.position.y;
            _checkRect.width = _baseState.width;
            _checkRect.height = _baseState.height;

            if(_checkRect.contains(mouseX, mouseY))
            {
                // Use roll over style.
                // Need to implement depth check so you can't roll over buttons
                // that fall behind others.
                i.render(bitmapData, _fontSprite, _overState);
            }
            else
            {
                i.render(bitmapData, _fontSprite, _baseState);
            }
        }

        bitmapData.unlock();
    }


    public function get buttons():Vector.<BitmapButton>{ return _buttons; }

}

还有一个小测试:

var canvas:ButtonCanvas = new ButtonCanvas(stage.stageWidth, stage.stageHeight);
addChild(canvas);


for(var i:int = 0; i < 20; i++)
{
    var button:BitmapButton = new BitmapButton("Hello");
    button.position.x = Math.random() * stage.stageWidth;
    button.position.y = Math.random() * stage.stageHeight;
    canvas.add(button);
}


stage.addEventListener(MouseEvent.MOUSE_MOVE, update);
function update(e:MouseEvent):void
{
    canvas.render();
}

canvas.render();

现在您已经阅读了所有内容，我要指出的是，您真的不太可能需要接近这种极端的情况，除非您有某种类型的游戏围绕按钮和按钮实际上是每帧生成 100 帧的粒子。在几乎所有情况下，使用标准 Sprite + TextField 都完全没问题。