本文介绍了ActionScript 3.0中最轻巧的按键实现的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

由于按键是最流行的GUI组件之一这个问题变得炙手可热当我们谈论内存使用。尤其是当你有吨,在你的应用程序按钮

Since button is one of the most popular GUI components this question becomes hot when we talk about memory usage. Especially when you have tons of buttons in your application.

所以,你可以如何实现使用最小的CPU和内存资源是的,就像用鼠标向上,向下和实施手形指针行为正常的按钮一个按钮。 标签文本也是必需的。

So how you can implement a button that uses minimum CPU and memory resources and yes, acts like normal button with mouse up, down and hand pointer behavior implemented. Label text is also required.

推荐答案

如果你想拥有的文本和图形按钮吨,使用最少量的内存和处理能力,你应该使用位图。

If you want to have tonnes of buttons with text and graphics, using the least amount of RAM and processing power, you should be using Bitmaps.

这得到了很多更复杂,涉及以下你自己的preparation:

This gets a lot more complicated and involves your own preparation of the following:

  1. 在一个精灵表形式的字体。
  2. 类用于管理使用精灵表呈现文本到一个位图。
  3. 在位图不回应MouseEvents,所以你需要架构自己的系统上的位图管理鼠标输入。

首先,让我们来看看在该基地的内存消耗一些,你会认为我们会是最好用的DisplayObject。这是我们的测试方法:

Firstly, lets take a look at the base memory consumption for some of the DisplayObjects that you would think we would be best using. This is our testing method:

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

这是测试:

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

在你的情况,绘制1000按钮将导致超过1,724,000字节的内存被使用。

In your case, drawing 1000 buttons would result in over 1,724,000 bytes of memory being used.

现在让我们来看看,我们将使用:

Now let's look at what we will be using:

  1. 在1X位图作为画布,保存所有按钮:236字节
  2. 1X的BitmapData重新presenting每个按钮的初始状态。
  3. 1X的BitmapData重新presenting每个按钮的翻转状态。
  4. 1X的BitmapData保存我们的文字作为一个精灵表供所有按钮使用。

每个的BitmapData 将在内存消耗相当大,并且有很大关系的内容。但这里的技巧是,我们只使用的一个的,并指其为我们想要绘制每一个按钮的内容。

Each BitmapData will be quite large in memory consumption, and varies greatly depending on its content. But the trick here is that we only use one and refer to its content for every button that we want to draw.

我已经设置了少量的code,让你开始。您仍然需要实现点击管理器,它遍历所有的按钮,并找出哪些是最相关的触发点击,以及按钮呈现的文本。

I've set up a small amount of code to get you started. You still need to implement a click manager which loops over all the buttons and works out which is most relevant to trigger a click, as well as rendering the text on the buttons.

下面是Button类:

Here's the Button class:

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; }

}

这是将管理使这些按钮的类:

And here's the class that will manage rendering those buttons:

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的每一帧的粒子。使用标准的雪碧+文本字段是完全正常几乎在所有情况。

Now that you've read all of that, I'll point out that it's really unlikely you need to anywhere near this extreme, unless you have some type of game that revolves around buttons and buttons are actually particles that get generated every frame in the 100's. Using a standard Sprite + TextField is perfectly fine in almost all cases.

这篇关于ActionScript 3.0中最轻巧的按键实现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-17 21:20
查看更多