flex 3以编程方式放大flex按钮hitArea

时间:2010-08-13 22:17:22

标签: flex actionscript-3 button skinning

有没有人知道如何以编程方式放大flex 3按钮的hitArea。 我可以覆盖一些功能吗? 按钮类中没有名为hitArea的函数。

我做的是,我为按钮创建了一个programmaticskin。皮肤的形状由四个箭头组成。在箭头之间没有任何东西(意思是透明的)。 由于皮肤的形状,很难点击按钮。皮肤改变了hitArea按钮。我正在寻找的是一种扩大hitArea并将hitArea形状改为方形的方法。 (击中区域必须仍然是隐形的)。

有人知道如何做到这一点吗?

由于

DJ

4 个答案:

答案 0 :(得分:4)

我过去处理这个问题的方法是通过将alpha设置为0.001(或类似的东西)来填充一个几乎看不见的填充。这样按钮就会认为区域是绘制的,因此是可以打的,但它对于用户来说太透明了。这很可爱/讨厌,但它确实有效。 :)

答案 1 :(得分:3)

对于每个扩展UIComponent的对象(如按钮),您都可以assign a Sprite as a custom hitarea。我只需在按钮上添加一个creationComplete Handler并绘制一个矩形精灵(宽度和高度等于按钮的宽度和高度),然后将其指定为按钮的新hitarea。

答案 2 :(得分:0)

这不是特定于按钮的 - 但是对于一般情况,您可以使用以下函数来扩展hitArea。

编辑:我刚刚添加了第二个特定于使用正确的hitState而不是hitArea的按钮的答案。


这将找到一个对象的边界,并通过'extendBy'量一直创建一个大于精灵的命中区域。只适用于方形物体 - 但通常这应该很好用。对于更复杂的命中区域,如果您想以编程方式进行操作,则需要更复杂的内容。

addHitAreaToParent=true 
adds the hit area to the parent (so child bounds don't change)

addHitAreaToParent=false (default) 
adds the hit area to the sprite itself. the bounds of this sprite will change, 
but if the sprite is moved inside its parent container the hit area will move too

希望这有帮助!

 public function extendHitArea(symbol:Sprite, extendBy:int, addHitAreaToParent:Boolean=false, visibleHitArea:Boolean=true) {

        // get bounds of existing sprite
        var bounds:Rectangle = addHitAreaToParent ? symbol.getBounds(symbol.parent) : symbol.getBounds(symbol);

        // create hit area - extended by 'extendBy' all the way aroudn
        var hitArea:Sprite = new Sprite();
        hitArea.graphics.beginFill(0xCCFF00, .5);
        hitArea.mouseEnabled = false;
        hitArea.graphics.drawRect(bounds.x - extendBy, bounds.y - extendBy, bounds.width + (extendBy * 2), bounds.height + (extendBy * 2));

        // add hit area either to the sprite itself (default) - or to the parent
        (addHitAreaToParent ? symbol.parent : symbol).addChild(hitArea);
        symbol.hitArea = hitArea;

        // hide the hit area (by default)
        hitArea.visible = visibleHitArea;

    }

答案 3 :(得分:0)

我无法使用Flex对此进行测试 - 但是这是一种以编程方式扩展普通SimpleButton的按钮尺寸的方法 - 这就是FLA文件的按钮。

希望你能以类似的方式使用Flex。

用法:

// extends the hit area of 'Add' button in the addToCart panel
extendButtonHitArea(addToCartPanel.btnAdd, 10);

// extends the hit area of 'Add' button to the entire 'Add to cart panel' + 10px
extendButtonHitArea(addToCartPanel.btnAdd, 5, addToCartPanel);

功能:

注意:testMode默认设置为true。您需要将此更改为false。

 public function extendButtonHitArea(button:SimpleButton, extendBy:int, 
                          hitSprite:DisplayObject=null, testMode:Boolean=true)
    {
        if (hitSprite == null) {
            hitSprite = button;
        }

        var bounds:Rectangle = hitSprite.getBounds(button);

        // create hit area - extended by 'extendBy' all the way aroudn
        var hitArea:Sprite = new Sprite();
        hitArea.graphics.beginFill(0xCCFF00, .5);
        hitArea.mouseEnabled = false;
        hitArea.graphics.drawRect(bounds.x - extendBy, bounds.y - extendBy, bounds.width + (extendBy * 2), bounds.height + (extendBy * 2));

                    // set hit state of button to our new sprite
        button.hitTestState = hitArea;

        // in test mode add an outline to the 'upState'
        if (testMode) 
        {
            var hitAreaVisual:Sprite = new Sprite();
            hitAreaVisual.graphics.lineStyle(1, 0xCCFF00, .7);
            hitAreaVisual.mouseEnabled = false;
            hitAreaVisual.graphics.drawRect(bounds.x - extendBy, bounds.y - extendBy, bounds.width + (extendBy * 2), bounds.height + (extendBy * 2));

            (button.upState as DisplayObjectContainer).addChild(hitAreaVisual);
        }
    }